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 对象。