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