H5中的localStorage笔记
先来介绍一下localStorage和cookie的区别：javascript
（1）localStorage的存储容量比cookie更大；html
（2）cookie做为http规范的一部分，它的主要做用是与服务器进行交互，使http保持链接状态。也就是你每次请求一个新的页面的时候，cookie都会被发送过去，这样无形中就浪费了宽带。html5
（3)cookie保存是能指定能够访问该cookie的范围；localStorage的访问范围就是当前整个网站，不存在访问范围这个概念。且，二者都不支持跨域调用。java
html5中的Web Storage包括了两种存储方式： sessionStorage和localStorage；chrome
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>
接合网上的一篇文章对这个有我本身的一些很粗浅的见解；cookie
localStorage自己带有的一些本地方法：session
添加键值对： 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有什么做用仍是没有弄懂，待之后看到相关方面的知识再来补充——————！