html5 web storage

Web Storage API Differences

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

client storage	有效范围	过期时间	值类型	兼容性	服务端访问性	大小
cookie	同源共享	默认是会话时长， 可设置	string	all	自动回传，服务器可操作	4k 左右
sessionStorage	同一个标签页（注意，和session的同浏览器共享不同）	标签页或浏览器关闭	string	ie8+	不可访问	5m 左右，浏览器差距较大
localStorage	同源的每个窗口和标签页	永久	string	ie8+	不可访问	5m 左右，浏览器差距较大

使用的时候根据各项特点结合使用场景来选择合适的存储介质

例子：

同时打开预订机票的2个标签页A和B， 选择不同的出发日期作对比 A： 2016-10-1；B：2016-10-3，如果用cookie来存储选中日期； 由于cookie的可访问范围比sessionStorage大 ，那么在标签页A提交订单的时候，订单的出发日期就很可能是B标签页选中的 2016-10-3日 而不是2016-10-1日。 这种情形sessionStorage更合适

相关事件

// 在其他标签页操作web storage才能触发
window.addEventListener("storage", displayStorageEvent, true);
function  displayStorageEvent(e){
 	for(var i in event){
		console.log("key: " + e.key + " , oldValue: "+e.oldValue + " ,newValue: " + e.newValue + " ,url: " + e.url + " ,storageArea: " + e.storageArea);
 	}
 }

Storage事件相关属性

key	value
key	被更新或操作的键
oldValue	更新前的值，如果是新增则为null
newValue	更新后的值，如果是删除则为null
url	Storage事件见发生的源
storageArea	localStorage或者sessionStorage

无论何时，Storage 对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件），StorageEvent 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。在其他域名下的页面不能访问相同的 Storage 对象。