LocalStorage & SessionStorage

前言

用于储存页面和状态信息，LocalStorage，SessionStorage与HTTP无关，HTTP请求不会带上其值，只有相同域名的页面才能互相读取LocalStorage的值

概述

1. 大小：官方建议LocalStorage最大存储量为5Mb左右，但每个浏览器实现不一样。
2. 类型：只能操作字符串，可存储数组，图片，json, 样式，脚本等能序列化字符串的内容，在存储之前应使用JSON.stringfy()先转换为字符串，取值时再用JSON.parse()再进行转换。
3. 隐私：明文存储，不能存储重要信息，不同浏览器无法共享localStorage和sessionStorage中的信息。
4. 区别

• LocalStorage永久有效，除非用户清理缓存，同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage
• SessionStorage则是在用户关闭页面后就失效，另外不同页面间无法共享sessionStorage的信息

API操作及事件相关

以下是保存setItem，读取getItem，删除removeItem以及获取索引key的操作

保存数据
localStorage.setItem( key, value );
sessionStorage.setItem( key, value );
读取数据
localStorage.getItem( key );
sessionStorage.getItem( key );
删除单个数据
localStorage.removeItem( key ); 
sessionStorage.removeItem( key );
删除全部数据
localStorage.clear( ); 
sessionStorage.clear( );
获取索引的key
localStorage.key( index ); 
sessionStorage.key( index );

可以通过监听 window 对象的 storage 事件并指定其事件处理函数，当页面中对 localStorage 或 sessionStorage 进行修改时，则会触发对应的处理函数

触发事件的时间对象（e 参数值）有几个属性：
key : 键值。
oldValue : 被修改前的值。
newValue : 被修改后的值。
url : 页面url。
storageArea : 被修改的 storage 对象。

window.addEventListener('storage',function(e){
   console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})