开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
前言
Web Storage 规范主要的两个目标：
- 提供在 cookie 之外的存储会话数据的路径
- 提供跨会话持久化存储大量数据的机制
主要通过两个对象：localStorage 和 sessionStorage 。localStorage 是永久存储机制，sessionStorage是跨会话的存储机制。目前基本所有的浏览器都支持这2个对象。
Storage 类型
storage 类型用于保存name/value 对数据。由浏览器决定存储的空间上限。但需要注意， storage 只能存储字符串，其他非字符串都需要转成字符串。其还增加很多方法可以直接通过 storage 对象调用。
- clear() 删除所有的值，在火狐浏览器不可用
- getItem(name) 获取给定的 name 值
- key(index) 取得给定数值的位置名称
- removeItem(name) 删除给定的 name的名/值对
sessionstorage 对象
sessionStorage 对象只存储会话数据。所以如果关闭浏览器的话，存储的数据就会被清除。通过使用 setItem 方法或直接属性赋值的方式添加数据。
sessionStorage.setItem("name","Tommy")
sessionStorage.name="Lily"
localStorage 对象
localStorage 在客户端持久存储数据，其主要是取代了 globalStorage 对象。所以如果在同一个 localStorage 对象中且在同一域，相同端口下所以访问的 localStorage 对象都是同一个。其用法和sessionStorage 对象都是一样的，因为它们都是 Storage 对象。
localStorage.setItem("name","Tommy")
localStorage.name="Lily"
localStorage 和sessionStorage 对象主要区别是：
- 存储在 localStorage 对象中的数据只有在使用 js 删除或者删除浏览器缓存时才会被删除。页面刷新、关闭、重启浏览器等操作都不会影响其数据
- sessionStorage 在关闭浏览器后就会被删除
存储事件
当 storage 对象发生变化时就会触发 storage 事件。基本进行设置值、删除、调用 clear 都会触发事件。
window.addEventListener("storage",(event)=>{
// to do something ...
})
storage 事件对象有 4个属性：domian 对应的域、被操作的key ，被设置的新值，若时删除就是null；还有就是之前旧值 oldValue。需要注意 storage 事件是无法区分时是localStorage 对象还是 sessionStorage 对象。
