前言
浏览器的本地存储主要分为：Cookie、 WebStorage（可分为LocalStorage和SessionStorage）、 IndexedDB。
Cookie
HTTP Cookie，通常叫做Cookie，一开始是在客户端用于存储会话信息的。
Cookie主要构成
- Name：名称，一个唯一确定的cookie的名称，cookie的名称必须经过URL编码。
- Value：值，存储在cookie中的字符串值。值必须被URL编码。
- Domain：域，指明cookie对哪个域有效，所有向该域发送的请求都会包含这个信息。
- Path：路径，对于指定域中的那个路径，应该向服务器发送cookie。
- Expires/Max-Age：有效期，表示cookie的有效期。
- HttpOnly：如果这个这个值设置为true，就不能通过JS脚本获取cookie的值。通过这个值可以有效防止XSS攻击。
- Secure：安全标志，指定后，cookie只有在使用SSL连接的时候才能发送到服务器。
Cookie的原理
第一次访问网站时，浏览器发出请求，服务器响应请求后，会在响应头中添加一个Set-Cookie，将cookie放入响应请求中。
在第二次发起请求时，浏览器通过Cookie请求头部将cookie信息送给服务器，服务端根据cookie信息辨别用户身份。
Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的生成
Cookie的生成方式主要有两种：
- 服务端设置Cookie
- 客户端设置Cookie
服务端设置方式参考上面Cookie的原理，具体的实现方式自行查阅相关资料。客户端设置Cookie方法如下：
document.cookie = "name=zhangsan; age=20"
Cookie的特点
- 每个特定域名下的cookie数量有限，不同浏览器数量限制不同。如果超过数量限制后再设置Cookie，浏览器就会清除以前设置的Cookie。
- 大小只有4kb。
- 每次HTTP请求都会默认带上Cookie，影响获取资源的效率。
- Cookie的获取、设置、删除方法需要我们自己去封装。
Web Storage
Web Storage分为localStorage和sessionStorage。
localStorage
localStorage以键值对的方式存储，永久存储，永不失效，除非手动删除。
localStorage有以下几个特点：
- 保持的数据永久有效，除非手动删除；
- 大小为5M
- 仅在客户端使用，不和服务端进行通信
- 接口封装较好
使用方法：
// 设置
localStorage.setItem('name', '张三')
localStorage.age = '25'
// 取值
localStorage.getItem('name')
let age = localStorage.age
// 移除
localStorage.removeItem('name')
// 移除所有
localStorage.clear()
sessionStorage
sessionStorage对象存储特定于某个会话的数据，当这个会话的页签或浏览器关闭，sessionStorage也就消失了。
页面刷新之后，存储在sessionStorage中的数据仍然存在可用。
sessionStorage的特点：
- 会话级别的浏览器存储
- 大小为5M
- 仅在客户端使用，不和服务端通信
- 接口封装较好
使用方法：
// 设置
sessionStorage.setItem('name', '张三')
sessionStorage.age = '25'
// 取值
sessionStorage.getItem('name')
let age = sessionStorage.age
// 移除
sessionStorage.removeItem('name')
// 移除所有
sessionStorage.clear()
sessionStorage和localStorage的区别：localStorage的数据可以长期保留，sessionStorage的数据在关闭页面后即被清空。
IndexedDB
IndexedDB，全称Indexed Database API，是浏览器中保持结构化数据的一种数据库。
IndexedDB的思想是创建一套API，方便保存和读取JavaScript对象，同时支持查询和搜索。
IndexedDB特点
- 键值对存储：IndexedDB采用对象仓库存储数据，可以存储所有类型的数据。仓库中数据以键值对的形式保持。
- 异步：IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作。
- 支持事务：有学过数据库的对事务肯定不陌生。事务意味着在一系列操作中，只要有一步失败，整个事务就都取消，数据库回滚到事务执行之前，不存在只改写一部分数据的情况。
- 同源限制：IndexedDB受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
- 储存空间大: IndexedDB 的储存空间比 localStorage大得多，一般来说不少于 250MB，甚至没有上限。
- 支持二进制储存: IndexedDB不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
IndexedDB的入门教程，可以查看阮一峰老师的文章：
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
总结
- Cookie主要用于“维持状态”，而非本地存储数据
- Web Storage是专门为浏览器提供的数据存储机制，不与服务端发生通信
- IndexedDB 用于客户端存储大量结构化数据
