HTML5本地儲存Localstorage的應用

localstorage可以說是對cookie的優化，使用它可以方便在客戶端儲存資料，並且不會隨著http傳輸，但也不是沒有問題：

① localstorage大小限制在500萬字元左右，各個瀏覽器不一致

② localstorage在隱私模式下不可讀取

③ localstorage本質是在讀寫檔案，資料多的話會比較卡（firefox會一次性將資料匯入記憶體，想想就覺得嚇人啊）

④ localstorage不能被爬蟲爬取，不要用它完全取代url傳參

localstorage的使用

localstorage儲存物件分為兩種：

② localstorage：將資料儲存在客戶端硬體裝置上，不管它是什麼，意思就是下次開啟計算機時候資料還在。

兩者區別就是乙個作為臨時儲存，乙個長期儲存。

儲存資料的方法就是直接給window.localstorage新增乙個屬性，例如：window.localstorage.a 或者 window.localstorage["a"]。它的讀取、寫、刪除操作方法很簡單，是以鍵值對的方式存在的，如下：

localstorage.a = 3;//
設定a為"3"
localstorage["a"] = "sfsf";//
設定a為"sfsf"，覆蓋上面的值
localstorage.setitem("b","isaac");//
設定b為"isaac"
var a1 = localstorage["a"];//
獲取a的值
var a2 = localstorage.a;//
獲取a的值
var b = localstorage.getitem("b");//
獲取b的值
localstorage.removeitem("c");//
清除c的值

這裡最推薦使用的自然是getitem()和setitem()，清除鍵值對使用removeitem()。如果希望一次性清除所有的鍵值對，可以使用clear()。另外，html5還提供了乙個key()方法，可以在不知道有哪些鍵值的時候使用，如下：

var storage =window.localstorage;
function
showstorage()
}

寫乙個最簡單的，利用本地儲存的計數器：

var storage =window.localstorage;
if (!storage.getitem("pageloadcount")) storage.setitem("pageloadcount",0);
storage.pageloadcount = parseint(storage.getitem("pageloadcount")) + 1;//
必須格式轉換
document.getelementbyidx_x("count").innerhtml =storage.pageloadcount;
showstorage();

需要注意的是，html5本地儲存只能存字串，任何格式儲存的時候都會被自動轉為字串，所以讀取的時候，需要自己進行型別的轉換。這也就是上一段**中parseint必須要使用的原因。

另外，在iphone/ipad上有時設定setitem()時會出現詭異的quota_exceeded_err錯誤，這時一般在setitem之前，先removeitem()就ok了。

html5的本地儲存，還提供了乙個storage事件，可以對鍵值對的改變進行監聽，使用方法如下：

if
(window.addeventlistener)
else
if(window.attachevent)
function
handle_storage(e) //
showstorage();
}

如果是需要相容不支援localstorage,就先檢測瀏覽器是否支援localstorage,不支援就使用cookie。

//
儲存，ie6~7 cookie 其他瀏覽器html5本地儲存
var areaparam = "020";
if(window.localstorage)  
else
}

取值時如下：

//
從儲存中取值
var g_area = window.localstorage? localstorage.getitem("area"): cookie.read("area");

HTML5本地儲存Localstorage的應用

HTML5本地儲存

html5 本地儲存

html5 本地儲存

HTML5本地儲存Localstorage的應用

HTML5本地儲存

html5 本地儲存

html5 本地儲存

相關推薦