JavaScript——本地存储

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 字符串转换成对象取出时候使用