HTML5 localStorage本地儲存

localStorage是最新的HTML5中的新技術，它主要是用於本地儲存。最近看了看localStorage，發現不僅比cookie實用多了，還比cookie簡單多了。於是我到這裡來和大家分享一下。

介紹

本地儲存這東西曆史可長了，先是從cookie開始，中途還有什麼userdata，flash，Gears，最後到了現在總算找到了我滿意的了，那就是localStorage。

來看看其它人對它們的評價：

最早的Cookies自然是大家都知道，問題主要就是太小，大概也就4KB的樣子，而且IE6只支持每個域名20個cookies，太少了。優勢就是大家都支持，而且支持得還蠻好。很早以前那些禁用cookies的用戶也都慢慢的不存在了，就好像以前禁用javascript的用戶不存在了一樣。 userData是IE的東西，垃圾。現在用的最多的是Flash吧，空間是Cookie的25倍，基本夠用。再之後Google推出了Gears，雖然沒有限制，但不爽的地方就是要裝額外的插件（沒具體研究過）。到了HTML5把這些都統一了，官方建議是每個網站5MB，非常大了，就存些字符串，足夠了。比較詭異的是居然所有支持的瀏覽器目前都採用的5MB，儘管有一些瀏覽器可以讓用戶設置，但對於網頁製作者來說，目前的形勢就5MB來考慮是比較妥當的。

講解

現在我要為大家講解localStorage了：

首先給大家一段測試的代碼：

var abb={};
abb[123]="7786";
window.onload=function(){
	alert(localStorage.a);
	localStorage["a"] = abb[123];
}

那麼這些代碼運行出來結果是怎樣呢，讓我們看看：

瀏覽器回發出這樣一個提示，說明我們定義的localStorage成功了。上面代碼具體解釋如下：

var abb={};
abb[123]="7786";

這兩行代碼是在定義map，並給map中的一個叫123的key賦值為7786。 （這個不是重點）

window.onload=function(){
	alert(localStorage.a);
	localStorage["a"] = abb[123];
}

這裡就是在操縱localStorage的代碼了， localStorage.a代表取a的值，localStorage["a"]=abb[123];是在給a賦值為上面定義的map abb。

語法總結

這裡還有一些關於localStorage的語法，請大家笑納：

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的值