Web 本地存储和Vue本地存储实例
Web 本地存储
Web Storage API
关键对象
window.sessionStorage对象用于区域存储；window.localStorage对象用于本地存储。
特点
- 数据的设置和读取比较方便。
- 容量较大，
sessionStorage大约为5MB，localStorage大约为20MB。 - 只能存储字符串，若想要存储JSON对象，则可以使用
window.JSON.stringify()或者parse()进行序列化和反序列化编码
区别
sessionStorage的存储周期只有一次会话（关闭浏览器就会消失）
localStorage的存储周期是永久的（关闭浏览器数据还在），除非用户手动清除浏览器缓存文件
属性和方法
window.localStorage.setItem('键','值')
window.sessionStorage.setItem('键','值')
| 方法/属性 | 描述 |
|---|---|
| key(n) | 该方法用于返回存储对象中第n个key的名称 |
| setItem(key, value) | 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
| getItem(key) | 该方法接收一个键名作为参数，返回键名对应的值 |
| removeItem(key) | 该方法删除键名为key的存储内容 |
| clear() | 该方法清空所有存储内容 |
| length | 该属性返回Storage存储对象中包含的item的数量 |
localStorage简单数据存储实例
Document
localStorage在Vue中的实例（标签记录器）
Document
标签记录器
{{index+1}}
{{list}}
x
总数：{{arr.length}}
Clear