25.2 Web Storage.md

25.2 Web Storage

25.2.1 sessionStorage 类型

Storage 类型用户保存 键/值 对数据，它的实例和对象一样，额外增加了以下方法：

• clear() 清空所有值
• getItem(name)
• key(index) 使用索引查看某个值
• setItem(name, value)
• removeItem(name)

25.2.2 sessionStorage 对象

sessionStorage 对象只存储回话数据，数据只会存在到浏览器关闭，和 cookie 的存储相似，刷新页面或者页面崩溃后恢复都不会清除它的值。

值得一提的是，本书提到了两种我之前不知道的使用方式，分别是新增和删除各一种，它除了用方法还可以直接用对象的形式

新增属性

• sessionStorage.setItem(’name', 'jaydon')
• sessionStorage.name = 'jaydon'

删除属性

• sessionStorage.removeItem(’name')
• delete sessionStorage.name

利用索引访问

key 方法可以传入索引访问值

for(let i = 0; i < sessionStorage.length; i++) {
	console.log(sessionStorage.key(i))
}

25.2.3 localStorage 对象

用法和上面的 sessionStorage 一样。区别在于它会一直存储在浏览器的本地内存上，不手动清除的情况下会一直驻留

25.2.4 存储事件

window.addEventListener('storage', (event) => {
  ...
})

在 storage 事件上，存在一下属性：

• domain 当前域
• key 改动的键
• newValue 改动后的值
• oldValue 改动前的值

值得注意的是，在这个事件上，无法区分是 localStorage 还是 sessionStorage 事件，他们二者的任何操作都会触发 storage 事件

25.2.5 限制

主要是大小限制，一般每个源最多是 5M