WebStorage 浏览器本地存储

WebStorage是指浏览器自带的本地存储。WebStorage存储内容大小一般支持5MB左右（不同浏览器的存储大小可能不一样）。

浏览器通过以下两种属性来实现本地存储：

window.sessionStorage：存储的内容仅在当前会话下有效。浏览器关闭，sessionStorage中的内容会被清空。
window.localStorage：存储的内容与会话的关闭无关。浏览器关闭后，localStorage中的内容依旧存在。手动清除（例如清空浏览器缓存）才会导致localStorage被清空。

sessionStorage和localStorage是按照网站地址（IP或域名+端口）进行存储。并且sessionStorage和localStorage存储的内容都是String类型。

window.sessionStorage和window.localStorage的4个API几乎一样，它们分别是：

setItem(key, value)：往sessionStorage或localStorage中存储一条数据，存储的数据会被解析成String类型进行存储。在解析时，setItem()调用的是对象的toString()方法。
- key：字符串类型的键，用于标识value。并且在sessionStorage或localStorage中，同一个网站地址的key是唯一的。
  
  也就是说，在同一个网站的sessionStorage中，不存在两个相同的key，如果一个相同的key被存储了两次，那么新数据会覆盖旧数据。localStorage与sessionStorage相同。
- value：要存储的值，可以是任意类型，最终会被解析成字符串形式进行存储。
```
 1// sessionStorage.setItem():
 2sessionStorage.setItem('msg', 'Hello sessionStorage!')
 3sessionStorage.setItem('num', 666)
 4// 存储对象时，通常手动解析为JSON进行存储
 5sessionStorage.setItem('person', JSON.stringify(person))
 6
 7// localStorage.setItem():
 8localStorage.setItem('msg', 'Hello localStorage!')
 9localStorage.setItem('num', 666)
10localStorage.setItem('person', JSON.stringify(person))
```

getItem(key)：从sessionStorage或localStorage中读取对应key的一条数据。

 1// sessionStorage.setItem():
 2console.log(sessionStorage.getItem('msg'));
 3console.log(sessionStorage.getItem('num'));
 4const result = sessionStorage.getItem('person')
 5console.log(JSON.parse(result));
 6// 读取不存在的数据
 7console.log(sessionStorage.getItem('user'));  // 返回 null
 8
 9// JSON.parse(null)  // 返回 null
10
11// localStorage.setItem():
12console.log(localStorage.getItem('msg'));
13console.log(localStorage.getItem('num'));
14const result = localStorage.getItem('person')
15console.log(JSON.parse(result));
16// 读取不存在的数据
17console.log(localStorage.getItem('user'));  // 返回 null

removeItem(key)：从sessionStorage或localStorage中删除对应key的一条数据。
```
1sessionStorage.removeItem('msg')
2localStorage.removeItem('msg')
```

clear()：将sessionStorage或localStorage中的所有数据清空。

1// 清空 sessionStorage 中的数据
2sessionStorage.clear()
3
4// 清空 localStorage 中的数据
5localStorage.clear()

WebStorage 浏览器本地存储

版权

评论