携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情
Web Storage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式，其由两种机制：localStorage和sessionStorage，它们区别在于：
- localStorage，本地存储，数据容量上限为5M，针对同一个域名下，这个域名下是持久存储的，在关闭掉网页重新打开时，存储的内容依然保留；
- sessionStorage是会话级别的存储，并不是持久化存储，页面关闭，sessionStorage就不存在了
这两种机制，都只保存在客户端，默认不参与服务端通信，这样很好的避免了 cookie 带来的性能问题和安全问题。它们具备相同的API接口封装，通过 setItem 和 getItem 等方法进行操作，非常方便，以下是storage的常用方法和属性：
| 属性/方法 | 含义 |
|---|---|
| Storage.length | 该属性返回一个整数，表示存储在Storage对象中的数据项数量； |
| Storage.key() | 该方法接受一个数值n作为参数，返回存储中的第n个key名称； |
| Storage.getItem() | 该方法接受一个key作为参数，并且返回key对应的value； |
| Storage.setItem() | 该方法接受一个key和value，并且将会把key和value添加到存储中。如果key存在，则更新其对应的值 |
| Storage.removeItem() | 该方法接受一个key作为参数，并把该key从存储中删除； |
| Storage.clear() | 该方法的作用是清空存储中的所有key； |
let webSite={name: 'juejin', Soglon: '掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。'};
localStorage.setItem("name", "juejin");
localStorage.setItem("webSite",JSON.stringify(webSite));
// 接着进入相同的域名时就能拿到相应的值
let webName = localStorage.getItem('name') // => juejin
let webInfo = JSON.parse(localStorage.getItem("webSite")) //{name: 'juejin', Soglon: '掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。'};
为了便于我们使用Storage，在开发中我们一般会对Storage进行封装：
class MyCache {
constructor(isLocal) {
this.storage = isLocal ? localStorage : sessionStorage
}
// 储存或更新数据
setItem(key, value) {
this.storage.setItem(key, JSON.stringify(value))
}
// 获取数据
getItem(key) {
let value = this.storage.getItem(key)
if (value) {
value = JSON.parse(value)
}
return value
}
// 清除数据
removeItem(key) {
this.storage.removeItem(key)
}
// 清空储存
clear() {
this.storage.clear()
}
// 返回名称
key(index){
return this.storage.key(index)
}
// 获取数据数目
length(){
return this.storage.length
}
}
const localCache = new MyCache(true)
const sessionCache = new MyCache(false)
export {
localCache,
sessionCache
}
当Storage对象发生增删改变化时，都会触发storage事件。
这个事件的时间对象有4个属性：
- domain：存储变化对应的域
- key：被设置或被删除的键
- newValue：键被设置的新值，若被删除则为null
- oldValue：键变化之前的值
window.addEventListener('storage', e=>{
console.log(e.domain)
})
