masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > teks badan

Menganalisis fungsi storan HTML5 dan kaedah pengendalian berkaitan kemahiran tutorial SQL_html5 web

WBOY
Lepaskan： 2016-05-16 15:45:55
asal
1341 orang telah melayarinya

HTML5 memperkenalkan dua mekanisme, serupa dengan kuki sesi HTTP, untuk menyimpan data berstruktur pada bahagian pelanggan dan mengatasi kelemahan berikut.

Kuki disertakan dalam setiap permintaan HTTP, menyebabkan pemindahan data yang sama melambatkan aplikasi web kami.

Kuki disertakan dengan setiap permintaan HTTP, menyebabkan data tidak disulitkan dihantar melalui Internet.

Kuki hanya boleh menyimpan 4KB data terhad, yang tidak mencukupi untuk menyimpan data yang diperlukan.
Dua kaedah storan ialah storan sesi dan storan setempat, yang akan digunakan untuk mengendalikan situasi yang berbeza.

Hampir semua penyemak imbas terkini menyokong storan HTML5, termasuk Internet Explorer.

Storan Sesi
_Storan Sesi_ direka untuk senario di mana pengguna melakukan satu transaksi, tetapi berbilang transaksi boleh dilakukan dalam tetingkap berbeza pada masa yang sama.

Contoh

Sebagai contoh, jika pengguna membeli tiket penerbangan dalam dua tetingkap berbeza di tapak web yang sama. Jika tapak web menggunakan kuki untuk menjejaki tiket yang telah dibeli oleh pengguna, tiket yang dibeli pada masa ini akan "bocor" apabila pergi dari satu tetingkap ke tetingkap yang lain apabila pengguna mengklik halaman tersebut, yang boleh menyebabkan pengguna membeli dua tiket untuk penerbangan yang sama tanpa disedari.

HTML5 memperkenalkan atribut sessionStorage Laman web ini boleh digunakan untuk menambah data pada storan sesi Pengguna masih boleh mengakses mana-mana halaman tapak yang sama dalam tetingkap terbuka yang menahan sesi juga kalah.

Kod berikut akan menetapkan pembolehubah sesi dan kemudian mengakses pembolehubah:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <badan>
  5. <skrip taip="teks/ javascript">
  6. jika( sessionStorage.hits ){
  7. sessionStorage.hits = Nombor(sessionStorage.hits) 1
  8. }lain{
  9. sessionStorage.hits = 1
  10. }
  11. document.write("Jumlah Hit:" sessionStorage.hits);
  12. skrip>
  13. <p>Muat semula halaman untuk meningkatkan bilangan hits. p> 
  14. <p>Tutup tetingkap dan buka semula dan semak hasilnya. p>
  16. badan>
  17. html>

Storan Tempatan
_Storan Tempatan_ direka untuk disimpan merentas berbilang tetingkap dan berterusan pada sesi semasa. Khususnya, aplikasi web mungkin mahu menyimpan berjuta-juta bait data pengguna pada klien atas sebab prestasi, seperti keseluruhan dokumen yang ditulis oleh pengguna atau peti mel pengguna.

Kuki tidak mengendalikan situasi ini dengan baik kerana ia dihantar dengan setiap permintaan.

Contoh

HTML5 memperkenalkan atribut localStorage, yang boleh digunakan untuk mengakses kawasan storan setempat halaman tanpa had masa storan setempat tersedia apabila kami menggunakan halaman ini.

Kod berikut menetapkan pembolehubah storan setempat yang boleh diakses setiap kali halaman ini diakses, walaupun pada kali berikutnya tetingkap dibuka:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <badan>
  5. <skrip taip="teks/ javascript">
  6. jika( localStorage.hits){
  7. localStorage.hits = Nombor(localStorage.hits) 1;
    8. }lain{
  9. localStorage.hits = 1
    10. }
    11. document.write("Jumlah Hit:" localStorage.hits);
    12. skrip> <
  12. p>Muat semula halaman untuk meningkatkan bilangan hits. p>  <
  13. p>Tutup tetingkap dan buka semula dan semak hasilnya. p>
    15. badan> html> Mudah untuk mempelajari konsep di atas - sila berlatih dalam talian.
Padam Storan Web

Menyimpan data sensitif pada mesin tempatan anda boleh berbahaya dan boleh meninggalkan lubang keselamatan.

_Data Tersimpan Sesi_ akan dipadamkan oleh penyemak imbas sejurus selepas penamatan sesi.
Untuk mengosongkan tetapan storan setempat, anda perlu memanggil localStorage.remove('key'); ini adalah kunci yang sepadan dengan nilai yang ingin kami alih keluar. Jika anda ingin mengosongkan semua tetapan, anda perlu memanggil kaedah localStorage.clear().

Kod berikut akan mengosongkan storan setempat sepenuhnya:

Kod XML/HTML

Salin kandungan ke papan keratan
  1. >  
  2. <html>  
  3. <badan>  
  4.   
  5.   <skrip taip="teks/ javascript">  
  6.     localStorage.clear();   
  7.   
  8.     // Tetapkan semula bilangan hitan.   
  9.     jika( localStorage.hits ){   
  10.        localStorage.hits = Nombor(localStorage.hits)  1;   
  11.     }lain{   
  12.        localStorage.hits = 1;   
  13.     }   
  14.     document.write("Total Hits :"   localStorage.hits );   
  15.   skrip>  
  16.   <p>Menyegarkan halaman tidak akan meningkatkan pukul kaunter.p>  
  17.   <p>Tutup tetingkap dan buka semula dan semak hasilnya.p>  
  18.   
  19. badan>  
  20. html>  

Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一一一一个组使用 SQL 操作客户端数据库的 APIs。
核心方法
下面是规范中定义的三个核心方法。也会涵盖在本教>：openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象>。我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql ：这个方法用于执行实际的 SQL 查询。

开启数据库
如果数据库已经存善在base ，openDatabase 这数据库，如果不存在，这个方法会创建它。

使用下面的代码可以创建并开启一个数据库：

Kod JavaScript
复制内容到剪贴板
    var
  1.  db = openDatabase('mydb', '1.0', 'Uji DB', 2 * 1024 * 1024);  

    2. Kaedah di atas menerima lima parameter berikut:

    Nama pangkalan data
    Nombor versi
    Teks penerangan
    Saiz pangkalan data
    Panggil balik ciptaan
    Parameter terakhir dan kelima, panggilan balik penciptaan akan dipanggil selepas pangkalan data dibuat. Walau bagaimanapun, walaupun tanpa ciri ini, masa jalan masih akan mencipta pangkalan data dan versi yang betul.

    Laksanakan pertanyaan
    Untuk melaksanakan pertanyaan, anda perlu menggunakan fungsi pangkalan data.transaksi(). Fungsi ini mengambil satu parameter, yang merupakan fungsi yang bertanggungjawab untuk benar-benar melaksanakan pertanyaan, seperti yang ditunjukkan di bawah:

    Kod JavaScriptSalin kandungan ke papan keratan
    1. var db = openDatabase('mydb', '1.0', 'Ujian DB', 2 * 1024 * 1024); db.transaction(
    2. fungsi (tx) { tx.executeSql(
    3. 'BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)'); });
    4. Pernyataan pertanyaan di atas akan mencipta jadual yang dipanggil LOGS dalam pangkalan data 'mydb'.
    Kendalian sisip

    Untuk mencipta entri dalam jadual, kami menambah pertanyaan SQL mudah kepada contoh di atas seperti berikut:


    Kod JavaScript

    Salin kandungan ke papan keratan
    var
      db = openDatabase(
    1. 'mydb', '1.0', 'Ujian DB', 2 * 1024 * 1024); db.transaction(fungsi (tx) {
    2. tx.executeSql('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)');
      3. tx.executeSql(
    3. 'MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")'); tx.executeSql(
      4. 'MASUKKAN KE DALAM LOG (id, log) NILAI (2, "logmsg")'
    4. ); });
    5. Anda juga boleh menghantar nilai dinamik seperti ini semasa membuat entri: Kod JavaScript
      6. Salin kandungan ke papan keratan
    var

    db = openDatabase(
    'mydb', '1.0'
    ,
    1. 'Ujian DB', 2 * 1024 * 1024); db.transaction(fungsi (tx) { tx.executeSql('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)'); tx.executeSql(
    2. 'MASUKKAN KE DALAM LOG (id,log) NILAI (?, ?'
      3. ), [e_id, e_log];
    3. });

      Di sini e_id dan e_log ialah pembolehubah luaran, executeSql akan memetakan setiap entri dalam parameter tatasusunan kepada "?".

      Baca operasi
      Untuk membaca rekod yang sedia ada, kita boleh menggunakan panggilan balik untuk menangkap keputusan seperti berikut:

      Kod JavaScriptSalin kandungan ke papan keratan
      1. var db = openDatabase('mydb', '1.0', 'Ujian DB', 2 * 1024 * 1024); db.transaction(
      2. fungsi (tx) { tx.executeSql(
      3. 'BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)'); tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")'
      4. ); tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (2, "logmsg")');
      5. }); db.transaction(fungsi
      6. (tx) {
      7. tx.executeSql('PILIH * DARI LOG', [], fungsi
      8. (tx, hasil) { var len = hasil.panjang.baris, i; msg =
      9. "

        Menemui baris: " len "

        ";
      10. document.querySelector('#status').innerHTML = msg; untuk
      11. (i = 0; i < len; i ){ makluman(results.rows.item(i).log); }
      12. }, null);
      13. });
      14. Contoh Akhir
        15. Akhir sekali, mari letakkan contoh ini ke dalam dokumen HTML5 penuh seperti ini dan cuba jalankan dalam Safari:
      15. Kod JavaScriptSalin kandungan ke papan keratan
        1.   
        2.   
        3.   
        4. "text/javascript">   
        5. var db = openDatabase('mydb', '1.0', 'Uji DB', 2 * 1024 * 1024);   
        6. var msg;   
        7. db.transaction(fungsi (tx) {   
        8.   tx.executeSql('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)’);   
        9.   tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")');   
        10.   tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (2, "logmsg")');   
        11.   msg = '

          Mesej log dibuat dan baris disisipkan.

          '          ;   
        12.   document.querySelector('#status').innerHTML =  msg;   
        13. });   
        14.   
        15. db.transaction(fungsi (tx) {   
        16.   tx.executeSql('PILIH * DARI LOG', [], fungsi (tx, hasil) {   
        17.    var len = results.rows.length, i;   
        18.    msg = "

          Menemui baris: "   len   "

          "
          19.    document.querySelector(
        19. '#status').innerHTML  =  msg;   
          20.    
        20. untuk (i = 0; i < len; i ){   
          21.      msg = 
        21. "

          "   results.rows.item(i).log   "

          "          ;   
          22.      document.querySelector(
        22. '#status').innerHTML  =  msg;   
          23.    }   
          24.  }, 
        24. null);   
          25. });   
          26.   
          27.   
          28.   
          29. "status" name="status">Status Message             
          30.   
        在浏览器中这会生成如下所示结果：



      复制代码>
      复制代码>

      Mesej log dibuat dan baris dimasukkan.

      Baris ditemui: 2

      foobar

      logmsg

Label berkaitan：
html5 sql storage 存储
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang penggunaan asas API Komunikasi dalam kemahiran tutorial HTML5_html5 Artikel seterusnya：Cara menggunakan atribut meta dalam petua tutorial HTML5_html5
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan