HTML5 localStorage本地儲存

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

介紹java

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

來看看其它人對它們的評價:spa

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

講解code

現在我要為你們講解localStorage了:orm

首先給你們一段測試的代碼:blog

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

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

運行出來的結果


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

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。

語法總結rem

這裡還有一些關於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的值

相關文章
相關標籤/搜索