HTML5 引入了兩種機(jī)制，類似于 HTTP 的會(huì)話 cookies，用于在客戶端存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)以及克服以下缺點(diǎn)。
每個(gè) HTTP 請(qǐng)求中都包含 Cookies，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的 Web 應(yīng)用程序。
每個(gè) HTTP 請(qǐng)求中都包含 Cookies，從而導(dǎo)致發(fā)送未加密的數(shù)據(jù)到互聯(lián)網(wǎng)上。
Cookies 只能存儲(chǔ)有限的 4KB 數(shù)據(jù)，不足以存儲(chǔ)所需的數(shù)據(jù)。
這兩種存儲(chǔ)方式是 session storage 和 local storage，它們將用于處理不同的情況。
幾乎所有最新版的瀏覽器都支持 HTML5 存儲(chǔ)，包括 IE 瀏覽器。
會(huì)話存儲(chǔ)
_會(huì)話存儲(chǔ)_被設(shè)計(jì)用于用戶執(zhí)行單一事務(wù)的場(chǎng)景，但是同時(shí)可以在不同的窗口中執(zhí)行多個(gè)事務(wù)。
示例
比如，如果用戶在同一網(wǎng)站的兩個(gè)不同的窗口中購(gòu)買機(jī)票。如果該網(wǎng)站使用 cookie 跟蹤用戶購(gòu)買的機(jī)票，當(dāng)用戶在窗口中點(diǎn)擊頁(yè)面時(shí)，從一個(gè)窗口到另一個(gè)時(shí)當(dāng)前已經(jīng)購(gòu)買的機(jī)票會(huì)“泄漏”，這可能導(dǎo)致用戶購(gòu)買同一航班的兩張機(jī)票而沒(méi)有注意到。
HTML5 引入了 sessionStorage 屬性，這個(gè)網(wǎng)站可以用來(lái)把數(shù)據(jù)添加到會(huì)話存儲(chǔ)中，用戶仍然可以在打開的持有該會(huì)話的窗口中訪問(wèn)同一站點(diǎn)的任意頁(yè)面，當(dāng)關(guān)閉窗口時(shí)，會(huì)話也會(huì)丟失。
下面的代碼將會(huì)設(shè)置一個(gè)會(huì)話變量，然后訪問(wèn)該變量：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <body>
-
- <script type="text/javascript">
- if( sessionStorage.hits ){
- sessionStorage.hits = Number(sessionStorage.hits) +1;
- }else{
- sessionStorage.hits = 1;
- }
- document.write("Total Hits :" + sessionStorage.hits );
- </script>
- <p>Refresh the page to increase number of hits.</p>
- <p>Close the window and open it again and check the result.</p>
-
- </body>
- </html>
本地存儲(chǔ)
_本地存儲(chǔ)_被設(shè)計(jì)用于跨多個(gè)窗口進(jìn)行存儲(chǔ)，并持續(xù)處在當(dāng)前會(huì)話上。尤其是，出于性能的原因 Web 應(yīng)用程序可能希望在客戶端存儲(chǔ)百萬(wàn)字節(jié)的用戶數(shù)據(jù)，比如用戶撰寫的整個(gè)文檔或者是用戶的郵箱。
Cookies 并不能很好的處理這種情況，因?yàn)槊總€(gè)請(qǐng)求都會(huì)傳輸。
示例
HTML5 引入了 localStorage 屬性，可以用于訪問(wèn)頁(yè)面的本地存儲(chǔ)區(qū)域而沒(méi)有時(shí)間限制，無(wú)論何時(shí)我們使用這個(gè)頁(yè)面的時(shí)候本地存儲(chǔ)都是可用的。
下面的代碼設(shè)置了一個(gè)本地存儲(chǔ)變量，每次訪問(wèn)這個(gè)頁(yè)面時(shí)都可以訪問(wèn)該變量，甚至是下次打開窗口時(shí)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <body>
-
- <script type="text/javascript">
- if( localStorage.hits ){
- localStorage.hits = Number(localStorage.hits) +1;
- }else{
- localStorage.hits = 1;
- }
- document.write("Total Hits :" + localStorage.hits );
- </script>
- <p>Refresh the page to increase number of hits.</p>
- <p>Close the window and open it again and check the result.</p>
-
- </body>
- </html>
便于學(xué)習(xí)上述概念 - 請(qǐng)進(jìn)行在線練習(xí)。
刪除 Web 存儲(chǔ)
在本地機(jī)器上存儲(chǔ)敏感數(shù)據(jù)可能是危險(xiǎn)的，可能會(huì)留下安全隱患。
_會(huì)話存儲(chǔ)數(shù)據(jù)_在會(huì)話終止之后將由瀏覽器立即刪除。
要清除本地存儲(chǔ)設(shè)置需要調(diào)用 localStorage.remove('key')；這個(gè) 'key' 就是我們想要移除的值對(duì)應(yīng)的鍵。如果想要清除所有設(shè)置，需要調(diào)用 localStorage.clear() 方法。
下面的代碼會(huì)完全清除本地存儲(chǔ)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <body>
-
- <script type="text/javascript">
- localStorage.clear();
-
- // Reset number of hits.
- if( localStorage.hits ){
- localStorage.hits = Number(localStorage.hits) +1;
- }else{
- localStorage.hits = 1;
- }
- document.write("Total Hits :" + localStorage.hits );
- </script>
- <p>Refreshing the page would not to increase hit counter.</p>
- <p>Close the window and open it again and check the result.</p>
-
- </body>
- </html>
Web SQL 數(shù)據(jù)庫(kù)
Web SQL 數(shù)據(jù)庫(kù) API 并不是 HTML5 規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫(kù)的 APIs。
核心方法
下面是規(guī)范中定義的三個(gè)核心方法。也會(huì)涵蓋在本教程中：
openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象。
transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。
executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。
開啟數(shù)據(jù)庫(kù)
如果數(shù)據(jù)庫(kù)已經(jīng)存在，openDatabase 方法負(fù)責(zé)開啟數(shù)據(jù)庫(kù)，如果不存在，這個(gè)方法會(huì)創(chuàng)建它。
使用下面的代碼可以創(chuàng)建并開啟一個(gè)數(shù)據(jù)庫(kù)：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
上面的方法接受下列五個(gè)參數(shù)：
數(shù)據(jù)庫(kù)名稱
版本號(hào)
描述文本
數(shù)據(jù)庫(kù)大小
創(chuàng)建回調(diào)
最后也是第五個(gè)參數(shù)，創(chuàng)建回調(diào)會(huì)在創(chuàng)建數(shù)據(jù)庫(kù)后被調(diào)用。然而，即使沒(méi)有這個(gè)特性(功能)，運(yùn)行時(shí)仍然會(huì)創(chuàng)建數(shù)據(jù)庫(kù)以及正確的版本。
執(zhí)行查詢
執(zhí)行查詢需要使用 database.transaction() 函數(shù)。這個(gè)函數(shù)需要一個(gè)參數(shù)，它是一個(gè)負(fù)責(zé)實(shí)際執(zhí)行查詢的函數(shù)，如下所示：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
- db.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
- });
上面的查詢語(yǔ)句會(huì)在 'mydb' 數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)叫做的 LOGS 的表。
插入操作
為了在表中創(chuàng)建條目，我們?cè)谏厦娴睦又屑尤牒?jiǎn)單的 SQL 查詢，如下所示：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
- db.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
- });
創(chuàng)建條目時(shí)還可以傳遞如下所示的動(dòng)態(tài)值：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
- db.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
- tx.executeSql('INSERT INTO LOGS
- (id,log) VALUES (?, ?'), [e_id, e_log];
- });
這里的 e_id 和 e_log 是外部變量，executeSql 會(huì)映射數(shù)組參數(shù)中的每個(gè)條目給 "?"。
讀取操作
要讀取已經(jīng)存在的記錄，我們可以使用回調(diào)來(lái)捕獲結(jié)果，如下所示：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
- db.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
- });
- db.transaction(function (tx) {
- tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
- var len = results.rows.length, i;
- msg = "<p>Found rows: " + len + "</p>";
- document.querySelector('#status').innerHTML += msg;
- for (i = 0; i < len; i++){
- alert(results.rows.item(i).log );
- }
- }, null);
- });
最終示例
最后，然我們把這個(gè)例子放到如下所示的完整 HTML5 文檔中，然后嘗試在 Safari 瀏覽器中運(yùn)行它：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <script type="text/javascript">
- var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
- var msg;
- db.transaction(function (tx) {
- tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
- tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
- msg = '<p>Log message created and row inserted.</p>';
- document.querySelector('#status').innerHTML = msg;
- });
-
- db.transaction(function (tx) {
- tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
- var len = results.rows.length, i;
- msg = "<p>Found rows: " + len + "</p>";
- document.querySelector('#status').innerHTML += msg;
- for (i = 0; i < len; i++){
- msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
- document.querySelector('#status').innerHTML += msg;
- }
- }, null);
- });
- </script>
- </head>
- <body>
- <div id="status" name="status">Status Message</div>
- </body>
- </html>
在瀏覽器中這會(huì)生成如下所示結(jié)果：
Log message created and row inserted.</p>
<p>Found rows: 2</p>
<p>foobar</p>
<p>logmsg
