本地存储相关的东西主要涉及到4个，Cookie, localStorage, sessionStorage, indexDB。简单列一张表哥来区分一下他们到分别。
| 特性 | Cookie | localStorage | sessionStorage | indexDB | |
|---|---|---|---|---|---|
| 管理 | 服务端设置，客户端修改和维护 | 客户端设置和维护 | 客户端设置和维护 | 客户端设置和维护 | |
| 生命周期 | 可以设置具体的失效日期 | 除非手动删除，否则一直有效 | 一个会话周期内有效，(关闭tab或浏览器都会导致失效) | 除非手动删除，否则一直有效 | |
| 是否共享 | 同源下的多个tab窗口之间可以共享 | 同源下的多个tab窗口之间可以共享 | 每个tab页面下都是一个新的sessionStorage | 同源下的多个tab窗口之间可以共享 | |
| 接口特性 | 同步 | 同步 | 同步 | 异步 | |
| 容量 | 4kb | 5MB | 5MB | > 250MB | |
| 服务端交互 | 每次请求都会最为header带给服务端 | 不会随请求发送 | 不会随请求发送 | 不会随请求发送 | |
| 存储类型 | 只能存储字符串类型的值 | 只能存储字符串类型的值 | 只能存储字符串类型的值 | 可以存储各种类型的值 |
总结
Cookie 存储容量小，且可以通过http请求和服务端进行通信，所以cookie更多是用来维持状态，例如标识登录态，服务端拿到cookie解析当前状态再决定如何响应。
localStorage和sessionStorage 在功能和接口上大致相同，不同点在于他们的生命周期和作用域，localStorage是持久存储并且支持跨窗口访问，儿sessionStorage则只能被当前窗口访问，且窗口关闭即失效。相对于indexedDB，它们都可以做少量数据的本地存储方案。而indexDB则可考虑用来实现大量结构化数据的存储