有关localStorage和sessionStorage的特性。localStorage本身带有方法有 添加键值对：localStorage.setItem(key,value)，如果key存在时，更新value。 获取键值：localStorage.getItem(key ...
有关localStorage和sessionStorage的特性。
localStorage本身带有方法有
添加键值对：localStorage.setItem(key,value)，如果key存在时，更新value。
获取键值：localStorage.getItem(key)，如果key不存在返回null。
删除键值对：localStorage.removeItem(key)。key对应的数据将会全部删除。
清除所有键值对：localStorage.clear()。如果调用clear()方法，清空localStorage中所有信息，那么key、oldValue和newValue都会被设置为null。
获取localStorage的属性名称（键名称）：localStorage.key(index)。
还有一个和普通对象不一样的属性length:
获取localStorage中保存的键值对的数量：localStorage.length。
下面这个例子用来获取localStorage的键值对
for(var i=0;i<localStorage.length;i++){console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));}这里仅仅是对IE兼容性的简单包装，下面的链接给出非常完善的针对localStorage兼容性的解决方案。
https://github.com/machao/localStorage
6、存储大小
对于HTML5的localStorage而言，其大小支持为5M（当然，各浏览器的大小差异还是有的）。对于IE的userData，用户数据的每个域最大为64KB。
7、应用场景
建议不要使用localStorage方式存储敏感信息，哪怕这些信息进行过加密。另外，对身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以通过xss漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录，但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。
storage事件：当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）。
在使用 Storage 进行存取操作的同时，如果需要对存取操作进行监听，可以使用 HTML5 Web Storage api 内置的事件**对数据进行监控。只要 Storage 存储的数据有任何变动，Storage **都能捕获。
interface Storage : Event{ readonly attribute DOMString key; readonly attribute DOMString? oldValue; readonly attribute DOMString? newValue; readonly attribute DOMString url; readonly attribute Storage? storageArea; void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in Storage storageAreaArg);};不难看出其中包含以下属性：
- key 属性表示存储中的键名
- oldValue 属性表示数据更新前的键值，newValue 属性表示数据更新后的键值。如果数据为新添加的，则 oldValue 属性值为 null。如果数据通过 removeItem 被删除，则 newValue 属性值为 null 。如果 Storage 调用的是 clear 方法，则事件中的 key 、oldValue 、newValue 都是为 null
- url 属性记录 Storage 时间发生时的源地址
- StorageArea 属性指向事件监听对应的 Storage 对象
Storage 事件可以使用 W3C 标准的注册事件方法 addEventListenter 进行注册监听。例如：
window.addEventlistener("storage",showStorageEvent,false);function showStorageEvent(e){ console.log(e)}
举例：
页面a下，有个input框用来存储store，它自身绑定了storage事件，这个时候写入新的数据点击保存，这时新的sotre数据保存了，但是页面a的storage事件没触发，
而页面b下，绑定的storage事件则触发了。（ps：前提页面a和b在同域下，并都是打开状态不同窗口）；
页面a代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" placeholder="input date to save"> <button>save</button> <script> (function(D){ var val = D.getElementsByTagName("input")[0], btn = D.getElementsByTagName("button")[0]; btn.onclick = function(){ var value = val.value; if(!value) return; localStorage.setItem("key", val.value); }; window.addEventListener("storage", function(e){ console.log(e); }); })(document); </script> </body> </html>
原标题：localStorage、sessionStorage详解，以及storage事件使用
关键词：session
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
