Web持久化存儲Web SQL、Local Storage、Cookies（經常使用）

在瀏覽器客戶端記錄一些信息，有三種經常使用的Web數據持久化存儲的方式，分別是Web SQL、Local Storage、Cookies。

Web SQL

做爲html5本地數據庫，可經過一套API來操縱客戶端的數據庫（關係數據庫），下面是支持瀏覽器狀況。

鑑於PC瀏覽器支持狀況，我找了淘寶、京東、攜程、起點、優酷網站，並無用Web SQL記錄客戶端信息。在移動端比較適用，特別是對於Hybrid應用，更是駕輕就熟。

接口：

openDatabase

transaction

executeSql

1.打開鏈接並建立數據庫

var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });

2.建立數據表

dataBase.transaction( function(tx) {
    tx.executeSql(
    "create table if not exists stu (id REAL UNIQUE, name TEXT)",
    [],
    function(tx,result){ alert('建立stu表成功'); },
    function(tx, error){ 
        alert('建立stu表失敗:' + error.message);

    });
});    

3.添加數據

dataBase.transaction(function (tx) {
    tx.executeSql(
    "insert into stu (id, name) values(?, ?)",
    [1, '徐明祥'],
    function () { alert('添加數據成功'); },
    function (tx, error) { 
        alert('添加數據失敗: ' + error.message);
    });
});

4.查詢數據

dataBase.transaction(function (tx) {
    tx.executeSql(
    "select * from stu", [],
    function (tx, result) { //執行成功的回調函數
        //在這裏對result 作你想要作的事情吧...........
    },
    function (tx, error) {
        alert('查詢失敗: ' + error.message)
    });
});

特色：

1.有事務

2.查詢數據，返回數據類型正確

3.被W3C丟棄的規範，但被普遍支持。

Local Storage

HTML5提供了沒有時間限制在客戶端存儲數據的手段，以鍵值對存取，網站只能訪問其自身的數據，瀏覽器支持以下。

PS：截圖來自網上資料

有個比較有趣的東西，我在起點、京東、優酷的localStorage找個共同的變量，就是jw_bl，裏面的數據是（我猜不到這個屬性是什麼簡寫的）：

{"created" : "Sat Nov 14 2015 23:52:10 GMT+0800 (中國標準時間)" , "expiration" : "Sat, 21 Nov 2015 10:51:54 -0500" , "reason" : "0"}

寫數據：

localStorage.pagecount=123;

讀數據：

localStorage.pagecount;  // return "123"

PS：要注意的是，獲取localStorage的值是字符串，無論你賦值的是什麼類型。

特色：

1. 獲取值是字符串類型

2. 容量有大約5M限制

注意是總數據量，屬性個數不限，我試過寫到100000條數據（val僅兩個字符），是能夠寫入的。

3. 不會進行網絡傳輸

Cookies

Cookies是最經常使用的Web數據持久化手段，全部瀏覽器都支持。Cookie是由服務器端生成，發送給User-Agent（通常是瀏覽器），瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內，下次請求同一網站時就發送該Cookie給服務器（前提是瀏覽器設置爲啓用cookie）。單點登陸（SSO）是個很經典的使用。

PS：固然也能夠在網頁設置cookies

Cookie數量和長度的限制

每一個domain最多隻能有20條（某些瀏覽器會多一些）cookie，每一個cookie長度不能超過4KB，不然會被截掉。

Cookie生命週期

Cookie在生成時就會被指定一個Expire值，這就是Cookie的生存週期，在這個週期內Cookie有效，超出週期Cookie就會被清除。將Cookie的生存週期設置爲「0」或負值，就立刻清除Cookie。

Cookie安全性問題

若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。或者是可收集這些信息作一些事。

Cookies請求附帶

Cookies每次請求會被髮送到服務器，佔用額外帶寬，示例參數以下（截了一個鬥魚網站請求的圖）。

PS：cookies參數須要使用抓包工具（相似fiddler）才能看到，Chrome開發者調試工具看不到的。

 

Cookies的Javascript編程

下面代碼來自網上資料：

建立cookies：

function setCookie(c_name,value,expiredays)
{

     var exdate=new Date();
     exdate.setDate(exdate.getDate()+expiredays);
     document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());

}

取值cookies：

function getCookie(c_name)
{
     if(document.cookie.length>0) {

          c_start=document.cookie.indexOf(c_name+"=");
          if(c_start!=-1) {
               c_start=c_start+c_name.length+1;
               c_end=document.cookie.indexOf(";",c_start);
               if(c_end==-1)
                    c_end=document.cookie.length;
               return unescape(document.cookie.substring(c_start,c_end));
          }
     }
     return "";
}

刪除cookies：

setCookie("acf_nickname", null , -1);

清除全部cookies：

由於cookies值可能存在「;=」字符，因此清除的函數還沒一那麼簡單，要照着本身工程看着寫。

總結

Web SQL通常在移動端使用，localStorage PC和移動端都適用，而cookies是全部持久化存儲支持最好的。可根據它們自己的特性選擇本身須要使用的方式。

 

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/4976233.html