解析HTML5的儲存功能和web SQL的相關操作方法_html5教學技巧

HTML5 引入了兩種機制，類似於 HTTP 的會話 cookies，用於在客戶端儲存結構化資料以及克服以下缺點。

每個 HTTP 請求中都包含 Cookies，從而導致傳輸相同的資料減緩我們的 Web 應用程式。

每個 HTTP 請求中都包含 Cookies，從而導致發送未加密的資料到互聯網上。

Cookies 只能儲存有限的 4KB 數據，不足以儲存所需的數據。
這兩種儲存方式是 session storage 和 local storage，它們將用於處理不同的情況。

幾乎所有最新版的瀏覽器都支援 HTML5 存儲，包括 IE 瀏覽器。

會話儲存
_會話儲存_被設計用於使用者執行單一事務的場景，但是同時可以在不同的視窗中執行多個事務。

範例

例如，如果使用者在同一網站的兩個不同的視窗中購買機票。如果該網站使用cookie 追蹤用戶購買的機票，當用戶在視窗中點擊頁面時，從一個視窗到另一個時當前已經購買的機票會“洩漏”，這可能導致用戶購買同一航班的兩張機票而沒有注意到。

HTML5 引入了sessionStorage 屬性，這個網站可以用來把資料加入會話儲存中，使用者仍然可以在開啟的持有該會話的視窗中存取同一網站的任意頁面，當關閉視窗時，會話也會丟失。

下面的程式碼將會設定一個會話變量，然後存取該變數：

XML/HTML Code複製內容到剪貼簿

1. HTML>  
2. html>  
3. body>  
4.   
5.   script type==type==type
== "
6. >
  
7.     if( sessionStorage.hits ){           sessionStorage.hits
 = 
8. Number    }else{   
9.        sessionStorage.hits = 1;
10.     }   
11.     document.write("Total Hits :"   sessionStorage.hits );   
12.   script>  
13.   p>Refresh the page p>     
14. p>Close the window >p>     
16. body>  
17. html>  

    本地存儲
    _本地存儲_被設計用於跨多個窗口進行存儲，並持續處在當前會話上。尤其是，出於效能的原因 Web 應用程式可能希望在客戶端儲存百萬位元組的使用者數據，例如使用者撰寫的整個文件或使用者的郵箱。

    Cookies 並不能很好的處理這種情況，因為每個請求都會傳送。

    範例

    HTML5 引入了 localStorage 屬性，可以用於存取頁面的本地儲存區域而沒有時間限制，無論何時我們使用這個頁面的時候本地儲存都是可用的。

    下面的程式碼設定了一個本地儲存變量，每次造訪這個頁面時都可以存取該變量，甚至是下次開啟視窗時：

    XML/HTML Code複製內容到剪貼簿

    1. HTML>  
    2. html>  
    3. body>  
    4.   
    5.   script type==type==type
    == "
    6. >
      
    7.     if( localStorage.hits ){           localStorage.hits
     = 
    8. Number    }else{   
    9.        localStorage.hits = 1;
    10.     }   
    11.     document.write("Total Hits :"   localStorage.hits );   
    12.   script>  
    13.   p>Refresh the page p>     
    14. p>Close the window >p>     
    16. body>  
    17. html>   方便學習上述概念 - 請進行線上練習。

    刪除 Web 儲存

    在本機上儲存敏感資料可能是危險的，可能會留下安全隱患。

    _會話儲存資料_在會話終止之後將由瀏覽器立即刪除。
    要清除本地儲存設定需要呼叫 localStorage.remove('key')；這個 'key' 就是我們想要移除的值對應的鍵。如果想要清除所有設置，則需要呼叫 localStorage.clear() 方法。

    下面的程式碼會完全清除本機儲存：
    XML/HTML Code
    複製內容到剪貼簿
    1. HTML>  
    2. html>  
    3. 身體>  
    4.   
    5.   腳本 類型="text/ javascript ">  
    6.     localStorage.clear();   
    7.   
    8.     //重置點擊次數。   
    9.     if(localStorage.hits ){   
    10.        localStorage.hits = 數字    }其他{   
    11.        
    12. localStorage.hits = 1;     }   
    13.     document.write("總點數："  localStorage.hits );   
    14.   
    15. 腳本>     
    16. p>刷新頁面不會增加點擊計數器。 p>     
    17. p>關閉視窗並再次開啟並檢查結果。 p>     
    19. 身體>  
    20. html>  
    Web SQL 資料庫

    Web SQL 資料庫 API 不是 HTML5 規範的一部分，但它是一個獨立的規範，引入了一組使用 SQL 操作用戶端資料庫的 API。

    核心方法
    以下是規範中定義的三個核心方法。另一個故事在本教程中：
    openDatabase：這個方法使用現有的資料庫或是新建的資料庫來建立一個資料庫物件。 transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或回滾。
    executeSql ：這個方法用來執行實際的SQL查詢。 開啟資料庫

    如果資料庫已經存在，openDatabase方法負責開啟資料庫，如果不存在，這個方法就會建立它。

    
    使用下面的程式碼可以建立並開啟一個資料庫：
    
    
    

    JavaScript 程式碼

    將內容複製到剪切板

    var

     db = openDatabase(
    1. 'mydb', '1.0' >, '測試資料庫', 2 * 1024 * 1024);  

       上面的方法接受下列五個參數：

       資料庫名稱
       版本號碼
       描述文字
       資料庫大小
       建立回呼
       最後也是第五個參數，建立回調會在建立資料庫後被呼叫。然而，即使沒有這個特性(功能)，運行時仍然會建立資料庫以及正確的版本。

       執行查詢
       執行查詢需要使用 database.transaction() 函數。這個函數需要一個參數，它是一個負責實際執行查詢的函數，如下所示：

       JavaScript Code複製內容到剪貼簿

       1. var db = openDatabase('mydb', 
       2. >, 'Test DB'
       , 2 * 1024 * 1024);   
       3. db.transaction(function
       4.  (tx) {     

          tx.executeSql(
       'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'

       });  
       

       上面的查詢語句會在 'mydb' 資料庫中建立一個叫做的 LOGS 的表。 插入操作

       為了在表中建立條目，我們在上面的例子中加入簡單的 SQL 查詢，如下所示：

       1. JavaScript Code複製內容到剪貼簿 var db = openDatabase('mydb', 
       3. >, 'Test DB'
       , 2 * 1024 * 1024);   
       4. db.transaction(function
       5.  (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")'
       });  

       建立條目時還可以傳遞如下所示的動態值：
       1. JavaScript Code複製內容到剪貼簿 var db = openDatabase('mydb', 
       3. >, 
       'Test DB'
       4. , 2 * 1024 * 1024);   
       5. db.transaction(function (tx) {     
       6.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,  

         tx.executeSql(
       'INSERT INTO LOGS                               > });  

       這裡的 e_id 和 e_log 是外部變量，executeSql 會映射數組參數中的每個條目給 "?"。

       讀取操作
       要讀取已經存在的記錄，我們可以使用回調來捕獲結果，如下所示：

       JavaScript Code複製內容到剪貼簿

       1. var db = openDatabase('mydb', 
       2. >, 'Test DB'
       , 2 * 1024 * 1024);   
       3. db.transaction(function
       4.  (tx) {       tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'
          tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'    tx.executeSql(
       5. 'INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'
       });   
       6. db.transaction(function
        (tx) {   
       7.    tx.executeSql('SELECT * FROM LOGS', [], 
          
       8. var len = results.rows.length, i;   
          msg = 
       9. "

          Found rows: "

             len      len   

          document.querySelector(
       10. '#status').innerHTML  =  msg;      
       11. for (i = 0; i 
             alert(results.rows.item(i).log );   
          }   
        }, 
       14. null);   
       });  

       最終範例
       最後，然我們把這個範例放到如下所示的完整 HTML5 文件中，然後嘗試在 Safari 瀏覽器中執行它：

       
       

       JavaScript Code

       複製內容到剪貼簿

       1. ;   
       2.   
       3.   
       4. "文字/javascript">   
       5. var db = openDatabase('mydb', 'mydb',  >, '測試資料庫'
       , 2 * 1024 * 1024);   
       6. var
        msg;   
       7. db.transaction(函數
        (tx) {   
       8.   tx.executeSql('如果不存在則建立表格日誌(id 唯一，日誌)'
       );   
       9. );      tx.executeSql(
       10. 'INSERT INTO LOGS (id, log) VALUES (1, "foobar")'  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logms    msg = 
       11. '

           已建立日誌訊息並插入一行。

           ';      document.querySelector(
       12. '#status').innerHTML =  msg;   
       });   
         
       db.transaction(
       15. 函數 (tx) {   
         tx.executeSql(
       16. '從日誌中選擇* , [], 函數, [], 函數, [], 
       函數    var len = results.rows.length, i;   
       17.    msg = "

           找到行: "

              len    >
       18.    document.querySelector('#status').innerHTML  =  msg;   
          
       19. 對於  (i = 0; i 
       20.      msg = "

           "   results.rows.item(i).log   ";         document.querySelector(

       21. '#status').innerHTML  =  msg; 🎜    }   
       22.  }, null
       23. );    });   
       24. 腳本>   
       25. 頭>   
       26.   
       27. 「狀態」
       28.  name=「狀態」> 狀態訊息

       &div> 🎜>