1. 本地存储介绍
1. 1 引入问题
- 以前我们页面写的数据一刷新页面就没有了,是不是?
1. 2 解决方案——sessionStorage 和 localStorage
- 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
a.数据存储在用户浏览器中
b.设置、读取方便、甚至页面刷新不丢失数据
c.容量较大, sessionStorage 和 localStorage 约5M左右
- 常见的使用场景:页面刷新数据不丢失
1. 3 注意
- 本地存储只能存储字符串数据类型
2. 本地存储分类﹣ localStorage
2. 1 作用
- 可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
2. 2 特性
- 可以窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
2. 3 语法
- 存储数据
localStorage . setitem ( key , value )
- 获取数据
localStorage . getitem ( key )
- 删除数据
localStorage . remoyeltem ( key )
2. 4 浏览器查看本地数据
3. 本地存储分类﹣ sessionStorage
3. 1 特性
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟 localStorage 基本相同
4. 存储中问题
4. 1 问题
- 本地存储只能存储字符串数据类型
4. 2 解决
- 需要将复杂数据类型转换成 JSON 字符串,在存储到本地
4. 3 语法
- JSON . stringify (复杂数据类型)
- 将复杂数据转换成 JSON 字符串存储本地存储中
5. 取出中问题
5. 1 问题:
- 因为本地存储里面取出来的是字符串,不是对象,无法直接使用
5. 2 解决
- 把取出来的JSON字符串转换为对象
5. 3 语法
- JSON . parse ( JSON 字符串)
- 将 JSON 字符串转换成对象取出时候使用