背景

先看看各種本地存儲的變革：

html' target='_blank'>Cookies：瀏覽器均支持，容量為4KB

UserData：僅IE支持，容量為64KB

Flash：100KB

Google Gears SQLite ：需要插件支持，容量無限制

LocalStorage：HTML5，容量為5M

現準備在項目中試圖取代cookie的實現，基本分析如下：

每次和服務器端進行交互，cookie都會在請求中被攜帶，cookie過多，也造成帶寬的浪費

cookie的容量很小，或許無法滿足當今互聯網的本地存儲需求

在IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+等平臺下，已經完全支持HTML5的LocalStorage

在IE7即以下版本中，可以使用UserData來代替cookie，而且同樣比cookie保險

用戶可能清cookie，但不見得知道去清UserData或者LocalStorage，這也增強了一道代碼保險

到底用啥來取代？

UserData：僅IE可用

Flash：存儲空間夠了，也還挺好，可這玩意兒不是HTML原生的

Google Gears：存儲空間沒啥限制，就是得裝額外的插件

HTML5-LocalStorage：官方建議每個站點可以本地存儲5M的內容，非常大了

最后再分析一下現在咱們針對的瀏覽器：IE系列、FF、Chrome、Safari、Opera，外加雙核的遨游、QQ瀏覽器、搜狗瀏覽器

其中，現在的FF、Chrome、Safari、Opera已經完全支持HTML5-LocalStorage

雙核的那些個瀏覽器，要么Webkit內核，要么IE內核（大多都是IE8的內核了），所以這些也是支持HTML5-LocalStorage的

最后就剩IE7及其以下版本，對于專門的IE，就用它們自家提供的UserData了，處理很方便

總結：用UserData和HTML5-LocalStorage結合的方式，來取代cookie！

UserData的存儲情況：

2011-03-23_201627.png

UserData行為通過將數據寫入一個UserData存儲區（UserData store）來保存數據，userData可以將數據以XML格式保存在客戶端計算機上。

該數據將一直存在，除非你人為刪除或者用腳本設置了該數據的失效期。

從上面的表格可以看出，就算是一個受限（Restricted）的站點，單個文檔也能存64KB的數據，整個Domain也能裝得下640KB的東西。

要了解更多UserData的東西，可以點擊這里

關于Expires

我們都知道，采用cookie來進行本地數據緩存，可以設定一個生命周期，在IE中采用UserData進行替代，能完美的實現。

但是對于HTML5提供的LocalStorage則沒有提供現成的API，來設置某本地存儲的生命周期，只能采取一些極端的手段進行模擬實現。

關于數據的批量存儲、提取、刪除

一個好用的組件庫，應該提供更加便捷的API，原生的cookie、UserData、LocalStorage都沒有提供現成的接口可調用，所以，在這里，我們來包裝一個，使其擁有這樣的批量接口。

代碼實現

1、IE中的UserData實現

原理很簡單，就是創建一個HTML節點，為其增加一個行為（behavior）：#default#userData，把待存儲的數據放到該節點的屬性上（setAttribute），再保存到本地即可（save）。

創建html實例：

/**

* 創建并獲取這個input:hidden實例

* @return {HTMLInputElement} input:hidden實例

* @private

*/

function _getInstance(){

//把UserData綁定到input:hidden上

var _input = null;

//是的，不要驚訝，這里每次都會創建一個input:hidden并增加到DOM樹種

//目的是避免數據被重復寫入，提早造成“磁盤空間寫滿”的Exception

_input = document.createElement("input");

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。