先来介绍一下localStorage和cookie的区别:
(1)localStorage的存储容量比cookie更大;
(2)cookie作为http规范的一部分,它的主要作用是与服务器进行交互,使http保持连接状态。也就是你每次请求一个新的页面的时候,cookie都会被发送过去,这样无形中就浪费了宽带。
(3)cookie保存是能指定可以访问该cookie的范围;localStorage的访问范围就是当前整个网站,不存在访问范围这个概念。且,两者都不支持跨域调用。
html5中的Web Storage包括了两种存储方式: sessionStorage和localStorage;
sessionStorage用于本地存储一个会话的数据,当会话结束时,存储的数据也会自动销毁(即当页面关闭的同时也销毁数据),因此,sessionStorage不是一个持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非手动删除数据,否则会一直保存。
下面是一个h5中localStorage的一个小应用:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>you have viewed this page <span id="count"></span> thimes(s).</p> <p><input type="button" value="changeStorage" onClick="changeS()"></input></p> <script type="text/javascript"> var storage = window.localStorage; if(!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0); storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) +1; document.getElementById("count").innerHTML = storage.pageLoadCount; showStorage(); // storage事件,在存储事件的处理函数中是不能取消这个存储动作的,存储事件只是浏览器在localStorage数据变化发 //生后给你的一个通知 if(window.addEventListener) { // 为了兼容浏览器或者自己写兼容处理函数,或者干脆不用storage事件 window.addEventListener("storage", handle_storage, false); // 而是调用一个handle_storage()函数来 }else if(window.attachEvent) { // 递归显示object window.attachEvent("onstorage",handle_storage); } function handle_storage(e) { // if(!e) { e=window.event; } showObject(e); } function showObject(obj) { //递归显示object if(!obj){return;} for(var i in obj) { if(typeof(obj[i])!="object" || obj[i] == null) { document.write(i + ":" + obj[i] + "<br/>"); }else { document.write(i + ":object" + "<br/>"); } } } storage.setItem("a",5); function changeS() { //修改一个键值,测试storage事件 if(!storage.getItem("b")) { storage.setItem("b",0); } storage.setItem('b',parseInt(storage.getItem('b'))+1); } function showStorage() { //循环显示localStorage里的键值对 for(var i=0;i<storage.length;i++) { //key(i)获得相应的键,再用getItem()方法获得对应的值 document.write(storage.key(i)+ ":" +storage.getItem(storage.key(i)) + "<br>"); } } </script> </body> </html>
接合网上的一篇文章对这个有我自己的一些很粗浅的看法;
localStorage本身带有的一些本地方法:
添加键值对: localStorage.setItem(key,value);
获取键值对: localStorage.getItem(key);
删除键值对: localStorage.removeItem(key);
清除所有键值对: localStorage.clear();
获取localStorage的属性名称(键名称): localStorage.key(index);
获取localStorage中保存的键值对的数量: localStorage.length;
获取localStorage完整键值对的列子:
localStorage事件
localStorage的storage事件,在存储事件的处理函数中是不能取消这个存储动作的。
存储事件只是浏览器在localStorage数据变化发生之后给你的一个通知。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是 空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时 就会被触发。
PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题,chrome修改localStorage能触发本页面的storage事件,Firefox 自身页面修改storage后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更 让人想的通些.实例推荐PrimeTechBlog的初试WebStorage之localstorage
所以建议,为兼容浏览器或者自己写兼容处理函数,或者干脆不用storage事件。
也正如下面的这一个代码段:
这里引入showObject()函数
至于这个递归显示object有什么作用还是没有弄懂,待以后看到相关方面的知识再来补充——————!