浏览器localStorage和sessionStorage详解、特点、区别、StorageEvent事件以及注意事项

概述

Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。

包含localStorage和sessionStorage

本文总结他们的特点、区别、StorageEvent事件以及注意事项

一、特点

1.键和值始终是字符串

localStorage.setItem('test',1);
localStorage.setItem('test2','1')
localStorage.getItem('test') === '1' // true
localStorage.getItem('test2') === '1' // true

需要注意，如果获取值之后判断使用 === ，获取不到正确结果

那么这个过程能否绕过去？答案是肯定的， 请看下边代码

localStorage.setItem('test',JSON.stringify(1));
localStorage.setItem('test2',JSON.stringify('1'))
JSON.parse(localStorage.getItem('test')) // 1
JSON.parse(localStorage.getItem('test2')) // '1'

使用JSON格式化数据后再存储，获取后再格式化，即可得到原来的数据。
需要注意的是，使用JSON格式化，JSON也有一些天然的弊端，比如undefined

2.可以像访问对象一样访问这些值

我们在使用过程中，经常用localStorage提供的setItem和getItem方法来设置和获取值，其实还有另wide方式。

localStorage.test = '1';
localStorage.test // '1'
delete localStorage.test // 返回一个Boolean值，表示是否成功

缺点是无法全部清空数据，需要遍历，手动删除

3.存储空间大小不一致

navigator.storage.estimate().then(estimate => {
  // estimate.quota 是估得的配额
  // estimate.usage 是估得的使用量，单位为 byte 比特
})

注意，该api在本地开发(127)时候可能不支持，需要localhost

4.浏览器支持不一致，使用时候最好判断下是否支持

• 存储的大小不一致
• 是否支持存储不一致
• 禁用后返回的状态不一致
• 隐私模式、隐身模式

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
	    console.log(e);
	    return false;
    }
}

二、区别

• localStorage 数据持久存储，除非用户手动删除
• sessionStorage 用户关闭浏览器tab页，就清空
• 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage

三、事件

当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件。

window.addEventListener('storage', function(e) {
// e.key 变动的key
// e.oldValue 旧值
// e.newValue 新值
// e.storageArea 被操作的 storage 对象
// e.url 发生改变的对象所在文档的 URL 地址
});

同一个页面的事件，无法监听

事件在同一个域下的不同页面之间触发，即在 A 页面注册了 storge 的监听处理，只有在跟 A 同域名下的 B 页面操作 storage 对象，A 页面才会被触发 storage 事件