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