共计 748 个字符，预计需要花费 2 分钟才能阅读完成。

本地储存特性

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方法

1. 数据储存在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStroage 和 localStorage 约 5M 左右

localStorage

1. 生命周期永久生效，除非手动删除否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

储存数据：

    localStorage.setItem(key, value)

获取数据：

    localStorage.getItem(key)

删除数据：

    localStorage.removeItem(key)

删除所有数据：

    localStorage.clear()

储存复杂数据类型（引用数据类型）：

本地只能存储字符串，无法储存复杂数据类型，需要将复杂数据类型转换成JSON字符串，再存储到本地

    // JSON 属性和值都是双引号进行包含
    {"uname":"Joe","age":18,"sex":"男"}

JSON.stringify(复杂数据类型)：

• 将复杂数据转换成JSON字符串 存储 本地存储中

        // 复杂数据类型一定要转换为JSON字符串再进行储存
        localStorage.setItem('obj', JSON.stringify(obj))

JSON.parse(JSON字符串)：

• 将JSON字符串转换成对象 取出 时候使用

        // 将JSON字符串转换为对象
        JSON.parse(localStorage.getItem('obj'))

sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口（页面）下数据可以共享
3. 以键值对的形式存储使用
4. 用法跟 localStorage 基本相同