localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存
储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也
带来了更强大的本地存储,最多可存储大小5M的字符串,足可以满足大部分的web应
用,比cookie的4K要大出不少,还有一个sessionStorage,功能基本与localStorage
相同,看名字便知与sesstion一样,关闭浏览器即失效。
以前有用过cookie的都了解cookie的存储读取方式都不太优雅,需要自己封装set get方
法,而localStorage则方便许多,localStorage 是作為window的一个属性存在的,拥
有setItem,getItem,removeItem,clear等方法,相当方便。
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服
务器里运行),支持情况如下图:
如下代码即可判断浏览器是否支持
if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") }
localStorage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样
用点操作符,及[]的方式进行数据存储,像如下的例
var storage = window.localStorage; storage.a = "haha"; storage["b"] = "hehe"; var a = storage.a; var b = storage["b"];
另外,localStorage还提供了一个key()方法,配合localStorage的length属性,可以
在不知道有哪些键值的时候使用,如下:
var storage = window.localStorage; function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)获得相应的键,再用getItem()方法获得对应的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); } }
FF里
storage.key(i) == storage
, 算个BUG吧
HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用
方法如下:
if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ if(!e){e=window.event;} //showStorage(); }
对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察
键值对的变化,如下表:
Property | Type | Description |
key | String | The named key that was added, removed, or moddified |
oldValue | Any | The previous value(now overwritten), or null if a new item was added |
newValue | Any | The new value, or null if an item was added |
url/uri | String | The page that called the method that triggered this change |
写一个最简单的,利用本地存储的计数器,有一个需要注意的地方是不管setItem里传什
么类型,最终都会被转成string,所以getItem的时候需要转类型:
<!doctype HTML> <html> <head> </head> <body > <div id="c"></div> <script> var storage = window.localStorage; if(!storage.getItem("num")){ storage.setItem("num",0); } var n = parseInt(storage.getItem("num"))+1; storage.setItem("num",n); document.getElementById("c").innerHTML = "这里显示的是计数结果:" + n; </script> </body> </html>