在浏覽器用戶端記錄一些資訊，有三種常用的web資料持久化存儲的方式，分别是web sql、local storage、cookies。
web sql
作為html5本地資料庫，可通過一套api來操縱用戶端的資料庫（關系資料庫），下面是支援浏覽器情況。
鑒于pc浏覽器支援情況，我找了淘寶、京東、攜程、起點、優酷網站，并沒有用web sql記錄用戶端資訊。在移動端比較适用，特别是對于hybrid應用，更是得心應手。
接口：
opendatabase
transaction
executesql
1.打開連接配接并建立資料庫
2.建立資料表
3.添加資料
4.查詢資料
特點：
1.有事務
2.查詢資料，傳回資料類型正确
3.被w3c丢棄的規範，但被廣泛支援。
local storage
html5提供了沒有時間限制在用戶端存儲資料的手段，以鍵值對存取，網站隻能通路其自身的資料，浏覽器支援如下。
ps：截圖來自網上資料
有個比較有趣的東西，我在起點、京東、優酷的localstorage找個共同的變量，就是jw_bl，裡面的資料是（我猜不到這個屬性是什麼簡寫的）：
寫資料：
讀資料：
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：
取值cookies：
删除cookies：
清除所有cookies：
因為cookies值可能存在“;=”字元，是以清除的函數還沒一那麼簡單，要照着自己工程看着寫。
總結
web sql一般在移動端使用，localstorage pc和移動端都适用，而cookies是所有持久化存儲支援最好的。可根據它們本身的特性選擇自己需要使用的方式。
本文為原創文章，轉載請保留原出處，友善溯源，如有錯誤地方，謝謝指正。
轉載：http://www.cnblogs.com/lovesong/p/4976233.html