本文主要讲述cookie、sessionStorage、localStorage、indexedDB这四种Javascript中的持久化方式
一，cookie localStorage sessionStorage indexedDB简介
1.cookie
定义
HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。
特点
Cookie一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。但是cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险。
应用
（1）会话状态管理： 如用户登录状态、购物车、游戏分数或其它需要记录的信息
（2）个性化设置：如用户自定义设置、主题和其他设置
(3)浏览器行为跟踪: 如跟踪分析用户行为等
2.localStorage的特点
- 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
- 存储的信息在同一域中是共享的
- 当本页操作（新增、修改、删除）了
localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。 - 大小：5M（跟浏览器厂商有关系）
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡- 受同源策略的限制
3.sessionStorage
sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据
4.indexedDB
indexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索
优点：
- 储存量理论上没有上限
- 所有操作都是异步的，相比
LocalStorage同步操作性能更高，尤其是数据量较大时 - 原生支持储存
JS的对象 - 是个正经的数据库，意味着数据库能干的事它都能干
缺点：
- 操作非常繁琐
- 本身有一定门槛
使用基本使用步骤如下：
- 打开数据库并且开始一个事务
- 创建一个
object store - 构建一个请求来执行一些数据库操作，像增加或提取数据等。
- 通过监听正确类型的
DOM事件以等待操作完成。 - 在操作结果上进行一些操作（可以在
request对象中找到）
二，区别
- 存储大小：
cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 - 有效时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 - 存储数据与服务器之间的交互方式，同源
cookie的数据会自动作为请求头的一部分传递到服务器，服务器端也可以写cookie到客户端。如果设置过多的cookie，会增加通信负荷。；sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
三，localStorage sessionStorage indexedDB的应用
- 适合长期保存在本地的数据（令牌），推荐使用
localStorage - 敏感账号一次性登录，推荐使用
sessionStorage - 存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，推荐使用
indexedDB
