HTML5 localStorage

HTML5 LocalStorage 本地存儲：

最先的Cookies天然是你們都知道，問題主要就是過小，大概也就4KB的樣子，並且IE6只支持每一個域名20個cookies，太少了。優點就是你們都支持，並且支持得還蠻好。很早之前那些禁用cookies的用戶也都慢慢的不存在了，就好像之前禁用javascript的用戶不存在了同樣。

 

userData是IE的東西，垃圾。如今用的最多的是Flash吧，空間是Cookie的25倍，基本夠用。再以後Google推出了Gears，雖然沒有限制，但不爽的地方就是要裝額外的插件（沒具體研究過）。到了HTML5把這些都統一了，官方建議是每一個網站5MB，很是大了，就存些字符串，足夠了。比較詭異的是竟然全部支持的瀏覽器目前都採用的5MB，儘管有一些瀏覽器可讓用戶設置，但對於網頁製做者來講，目前的形勢就5MB來考慮是比較穩當的。

首先天然是檢測瀏覽器是否支持本地存儲。在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該能夠很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。兩者用法徹底相同。

存儲數據的方法就是直接給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本地存儲只能存字符串，任何格式存儲的時候都會被自動轉爲字符串，因此讀取的時候，須要本身進行類型的轉換。這也就是上一段代碼中parseInt必需要使用的緣由。

目前javascript使用很是多的json格式，若是但願存儲在本地，能夠直接調用JSON.stringify()將其轉爲字符串。讀取出來後調用JSON.parse()將字符串轉爲json格式，以下所示：

var details = {author:"isaac","description":"fresheggs","rating":100};
storage.setItem("details",JSON.stringify(details));
details = JSON.parse(storage.getItem("details"));

JSON對象在支持localStorage的瀏覽器上基本都支持。