在瀏覽器客戶端記錄一些信息，有三種常用的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限制

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是所有持久化存儲支持最好的。可根據它們本身的特性選擇自己需要使用的方式。

總結

以上是生活随笔為你收集整理的关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。