Menganalisis fungsi storan HTML5 dan kaedah pengendalian berkaitan kemahiran tutorial SQL

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

>
<html>
<badan>
<skrip taip="teks/ javascript">
jika( sessionStorage.hits ){
sessionStorage.hits = Nombor(sessionStorage.hits) 1
}lain{
sessionStorage.hits = 1
}
document.write("Jumlah Hit:" sessionStorage.hits);
skrip>
<p>Muat semula halaman untuk meningkatkan bilangan hits. p>
<p>Tutup tetingkap dan buka semula dan semak hasilnya. p>
badan>
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

>
<html>
<badan>
<skrip taip="teks/ javascript">
jika( localStorage.hits){
localStorage.hits = Nombor(localStorage.hits) 1;
localStorage.hits = 1

skrip

> <

p>Muat semula halaman untuk meningkatkan bilangan hits. p> <

p>Tutup tetingkap dan buka semula dan semak hasilnya. p>

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

>
<html>
<badan>
<skrip taip="teks/ javascript">
localStorage.clear();
// Tetapkan semula bilangan hitan.
jika( localStorage.hits ){
localStorage.hits = Nombor(localStorage.hits) 1;
}lain{
localStorage.hits = 1;
}
document.write("Total Hits :" localStorage.hits );
skrip>
<p>Menyegarkan halaman tidak akan meningkatkan pukul kaunter.p>
<p>Tutup tetingkap dan buka semula dan semak hasilnya.p>
badan>
html>

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

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

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

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

Kod JavaScript

复制内容到剪贴板

db = openDatabase('mydb', '1.0', 'Uji DB', 2 * 1024 * 1024);

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

var db = openDatabase('mydb', '1.0', 'Ujian DB', 2 * 1024 * 1024); db.transaction(
fungsi (tx) { tx.executeSql(
'BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)'); });
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

var

'mydb', '1.0', 'Ujian DB', 2 * 1024 * 1024); db.transaction(fungsi (tx) {
tx.executeSql('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)');
'MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")'); tx.executeSql(
); });
Anda juga boleh menghantar nilai dinamik seperti ini semasa membuat entri: Kod JavaScript

'mydb', '1.0'

'Ujian DB', 2 * 1024 * 1024); db.transaction(fungsi (tx) { tx.executeSql('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)'); tx.executeSql(
'MASUKKAN KE DALAM LOG (id,log) NILAI (?, ?'
});
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. Kod JavaScriptSalin kandungan ke papan keratan
复制代码>
复制代码>

Mesej log dibuat dan baris dimasukkan.

Baris ditemui: 2

foobar

logmsg

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