HTML 本地存儲介紹
最早的 Cookies 自然是大家都知道，問題主要就是太小，大概也就 4KB 的樣子，而且 IE6 只支持每個域名20個cookies，太少了。優勢就是大家都支持，而且支持得還蠻好。很早以前那些禁用 cookies 的用戶也都慢慢的不存在了，就好像以前禁用 javascript 的用戶不存在了一樣。 userData 是 IE 的東西，垃圾。現在用的最多的是 Flash 吧，空間是 Cookie 的25倍，基本夠用。再之后 Google 推出了 Gears，雖然沒有限制，但不爽的地方就是要裝額外的插件（沒具體研究過）。到了 HTML 5把這些都統一了，官方建議是每個網站 5MB，非常大了，就存些字符串，足夠了。比較詭異的是居然所有支持的瀏覽器目前都采用的 5MB，盡管有一些瀏覽器可以讓用戶設置，但對於網頁制作者來說，目前的形勢就 5MB 來考慮是比較妥當的。 支持的情況如上圖，IE 在 8.0 的時候就支持了，非常出人意料。不過需要注意的是，IE、Firefox 測試的時候需要把文件上傳到服務器上（或者 localhost），直接點開本地的 HTML 文件，是不行的。
HTML5 localStorage 操作使用
首先自然是檢測瀏覽器是否支持本地存儲。在 HTML5 中，本地存儲是一個 window 的屬性，包括 localStorage 和 sessionStorage，從名字應該可以很清楚的辨認二者的區別，前者是一直存在本地的，后者只是伴隨着 session，窗口一旦關閉就沒了。二者 用法完全相同。這里以localStorage為例。
1 if(window.localStorage){
2 alert('瀏覽器支持本地存儲！');
3 }else{
4 alert('瀏覽器不支持本地存儲！');
5 }
三種設置本地存儲的方法存儲數據的方法就是直接給window.localStorage添加一個屬性。 例如：localStorage.a 或者 localStorage["a"]。它的讀取、寫、刪除操作方法很簡單，是以鍵值對的方式存在的。
- localStorage.a = "iwanc";
- localStorage["b"] = "HTML5";
- localStorage.setItem("c","Jquery");
三種訪問本地存儲的方法
- localStorage.a;
- localStorage["b"];
- localStorage.getItem("c");
其他擴展
- localStorage.removeItem(); //清除
- localStorage.clear(); //清除所有
- localStorage.length; //獲得多少鍵
- localStorage.key(); //獲得存儲的鍵內容
- localStorage.getItem(localStorage.key(0))
這里最推薦使用的自然是 getItem() 和 setItem()，清除鍵值對使用 removeItem()。如果希望一次性清除所有的鍵值對，可以使用 clear()。另外，HTML5還提供了一個key()方法，可以在不知道有哪些鍵值的時候使用，如下：
var storage = window.localStorage; function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)獲得相應的鍵，再用getItem()方法獲得對應的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); } }
寫一個最簡單的，利用本地存儲的計數器：
$(function(){
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必須格式轉換
$("#count").html("最簡單的本地存儲的計數器：您一共瀏覽了 "+storage.pageLoadCount+" 次。");
})
需要注意的是，HTML5 本地存儲只能存字符串，任何格式存儲的時候都會被自動轉為字符串，所以讀取的時候，需要自己進行類型的轉換。這也就是上一段代碼中 parseInt 必須要使用的原因。 在 iPhone/iPad 上有時設置setItem()時會出現詭異的 QUOTA_EXCEEDED_ERR 錯誤，這時一般在 setItem 之前，先 removeItem() 就ok了。 另外，目前 javascript 使用非常多的 json 格式，如果希望存儲在本地，可以直接調用 JSON.stringify() 將其轉為字符串。讀取出來后調用 JSON.parse() 將字符串轉為 json 格式，如下所示：
1 var details = {author:"iwanc","description":"HTML5","rating":100};
2 storage.setItem("details",JSON.stringify(details));
3 details = JSON.parse(storage.getItem("details"));
JSON 對象在支持 localStorage 的瀏覽器上基本都支持，需要注意的是IE8，它支持 JSON，但如果添加了兼容模式代碼（<meta content="IE=7" http-equiv="X-UA-Compatible"/>），切換到 IE7 模式就不行了（此時依然支持localStorage，雖然顯示 window.localStorage 是 [object]，而不是之前的 [object Storage]，但測試發現 getItem()、setItem() 等均能使用）。