歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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了:

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

  1. var abb={};  
  2. abb[123]="7786";  
  3. window.onload=function(){  
  4.     alert(localStorage.a);  
  5.     localStorage["a"] = abb[123];  
  6. }  

那麼這些代碼運行出來結果是提醒你保存的值。

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

  1. var abb={};  
  2. abb[123]="7786";  

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

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

這裡就是在操縱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的值

Copyright © Linux教程網 All Rights Reserved