前言
javaScript 本地存储（也称本地缓存）的⽅法我们主要讲述以下四种：
- cookie
- sessionStorage
- localStorage
- indexedDB
一、cookie
Cookie ，类型为「⼩型⽂本⽂件」，指某些⽹站为了辨别⽤户身份⽽储存在⽤户本地终端上的数据。 是为了解决 HTTP ⽆状态导致的问题。
作为⼀段⼀般不超过 4KB 的⼩型⽂本数据，它由⼀个名称（Name）、⼀个值（Value）和其它⼏个⽤于控制 cookie 有效期、安全性、使⽤范围的可选属性组成。
但是 cookie 在每次请求中都会被发送，如果不使⽤ HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全⻛险。举个例⼦，在⼀些使⽤ cookie 保持登录态的⽹站上，如果 cookie 被窃取，他⼈很容
易利⽤你的 cookie 来假扮成你登录⽹站。
关于 cookie 常⽤的属性：
- Expires ⽤于设置 Cookie 的过期时间
Expires=Wed, 21 Oct 2015 07:28:00 GMT
- Max-Age ⽤于设置在 Cookie 失效之前需要经过的秒数（优先级⽐ Expires ⾼）
Max-Age=604800
Domain指定了Cookie可以送达的主机名Path指定了⼀个URL路径，这个路径必须出现在要请求的资源的路径中才可以发送Cookie⾸部
Path=/docs # /docs/Web/ 下的资源会带 Cookie ⾸部
- 标记为
Secure的Cookie只应通过被HTTPS协议加密过的请求发送给服务端
通过上述，我们可以看到 cookie ⼜开始的作⽤并不是为了缓存⽽设计出来，只是借⽤了 cookie 的特性实现缓存。
关于 cookie 的使用：
document.cookie = '名字=值';
关于 cookie 的修改，⾸先要确定 domain 和 path 属性都是相同的才可以，其中有⼀个不同得时候都会创建出⼀个新的 cookie。
Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置 document.cookie =name=bb; domain=aa.net; path=/ # 客户端设置
最后 cookie 的删除，最常⽤的⽅法就是给 cookie 设置⼀个过期的事件，这样 cookie 过期后会被浏览器删除。
二、localStorage
HTML5 新⽅法，IE8及以上浏览器都兼容
特点：
⽣命周期：持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的
存储的信息在同⼀域中是共享的
当本⻚操作（新增、修改、删除）了 localStorage 的时候，本⻚⾯不会触发 storage 事件,但是别的⻚⾯会触发 storage 事件。
⼤⼩：5M（跟浏览器⼚商有关系）
localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致⻚⾯变卡受同源策略的限制。
关于localStorage 的使用
- 设置
localStorage.setItem('username','cfangxu');
- 获取
localStorage.getItem('username');
- 获取键名
localStorage.key(0) //获取第⼀个键名;
- 删除
localStorage.removeItem('username');
- ⼀次性清除所有存储
localStorage.clear();
localStorage 也不是完美的，它有两个缺点：
- ⽆法像 Cookie ⼀样设置过期时间
- 只能存⼊字符串，⽆法直接存对象
localStorage.setItem('key', {name: 'value'}); console.log(localStorage.getItem('key')); // '[object, Object]'
三、sessionStorage
sessionStorage 和 localStorage 使⽤⽅法基本⼀致，唯⼀不同的是⽣命周期，⼀旦⻚⾯（会话）关闭， sessionStorage 将会删除数据。
四、扩展的前端存储⽅式
indexedDB 是⼀种低级API，⽤于客户端存储⼤量结构化数据(包括, ⽂件/ blobs)。该API使⽤索引来实现对该数据的⾼性能搜索
虽然 Web Storage 对于存储较少量的数据很有⽤，但对于存储更⼤量的结构化数据来说，这种⽅法不太有⽤。IndexedDB 提供了⼀个解决⽅案
优点：
- 储存量理论上没有上限
- 所有操作都是异步的，相⽐ LocalStorage 同步操作性能更⾼，尤其是数据量较⼤时
- 原⽣⽀持储存 JS 的对象
- 是个正经的数据库，意味着数据库能⼲的事它都能⼲
缺点：
- 操作⾮常繁琐
- 本身有⼀定⻔槛
关于 indexedDB 的使⽤基本使⽤步骤如下：
- 打开数据库并且开始⼀个事务
- 创建⼀个 object store
- 构建⼀个请求来执⾏⼀些数据库操作，像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进⾏⼀些操作（可以在 request 对象中找到）
关于使⽤ indexdb 的使⽤会⽐较繁琐，⼤家可以通过使⽤ Godb.js 库进⾏缓存，最⼤化的降低操作难度。
五、总结
一、区别
关于 cookie 、 sessionStorage 、 localStorage 三者的区别主要如下：
存储⼤⼩：
cookie 数据⼤⼩不能超过 4k ， sessionStorage 和localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据；sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除； cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭
数据与服务器之间的交互⽅式， cookie 的数据会⾃动的传递到服务器，服务器端也可以写cookie 到客户端； sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
二、应⽤场景
在了解了上述的前端的缓存⽅式后，我们可以看看针对不对场景的使⽤选择：
- 标记⽤户与跟踪⽤户⾏为的情况，推荐使⽤ cookie
- 适合⻓期保存在本地的数据（令牌），推荐使⽤ localStorage
- 敏感账号⼀次性登录，推荐使⽤ sessionStorage
- 存储⼤量数据的情况、在线⽂档（富⽂本编辑器）保存编辑历史的情况，推荐使⽤ indexedDB
