数据存储：cookie、sessionStorage、localStorage、IndexedDB

将数据存储到客户端的几种方案：

HTTP Cookie

最初用于在客户端存储会话信息，要求服务器对任意的HTPP请求发送Set-Cookie HTTP头作为响应的一部分，浏览器会存储cookie的信息，之后会为每一个请求都加上cookie的头发送回服务器。

//set-cookie 响应头
HTTP/1.1 200 OK
Content-type: text-html
Set-Cookie: name=value

//带有Cookie的请求头
GET /index.html HTTP/1.1
Cookie: name=value

限制：`cookie`是绑定在特定域名下的，每个域的`cookie`的总数是有限的，不同浏览器之间也不同

IE6及以下：每个域最多20个；
IE7以及上：每个域最多50个；
Firefox：每个域最多50个；
Opera：每个域最多30个；
safari和chrome：对每个域的cookie数量没有硬性规定；
除了个数限制，对于cookie的大小也有限制，大部分是4096B上下，如果超出会被直接丢掉。
cookie构成：名称=value; domain=".jianshu.com"; （路径）; （失效时间）; （安全标志：cookie只有在使用SSL连接的时候才发送给服务器）

sessionStorage和localStorage都是Storage类型，都具有如下方法：

clear():删除所有值；火狐中没有实现
getItem(name):获取name对应的值
key(index):获得index位置处的值名字
removeItem(name):删除指定name的名值对
setItem(name):设置指定name的值

sessionStorage对象存储的数据只保存到浏览器关闭，可以跨页面刷新而存在。同时如果浏览器支持，浏览器崩溃之后依然可用（火狐和webkit可以，IE不行），主要用于会话的小段数据存取。

localStorage对象存储的数据保存到javascript删除或者用户清除浏览器缓存。

localStorage是5MB的限制，chrome和safari，ios版safari和Android版webkit的限制都是2.5MB。

sessionStorage的限制大都是也是2.5MB;IE8+和Opera的限制是5MB。

IndexedDB

IndexedDB是浏览器中保存结构化数据的一种数据库，它的思想是创建一套API，方便存储和读取Javascript对象，同时还支持查询和搜索。IndexedDB设计的操作完全是异步进行的，每一次IndexedDB操作都要注册onerror或onsuccess事件，以确保处理结果。数据不是存储在表中，而是存储在对象存储空间中。

表格总结区分这几种存储数据的方式：

特性	cookie	localStorage	sessionStorage	IndexDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在 header 中，对于请求性能影响	不参与	不参与	不参与

注意：不要在客户端存储敏感数据，数据缓存是不会加密数据的。

参考：
https://book.douban.com/subject/10546125/
https://juejin.im/book/5bdc715fe51d454e755f75ef