# Web 存储

localStorage、sessionStorage、indexedDB、Cookies、Web SQL (仅Chrome)

表格一览

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间；前端采用 `js-cookie` 等组件也可以生成	除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器	页面关闭就清理刷新依然存在，不支持跨页面交互	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	不限制大小
与服务端通信	每次都会携带在请求的header 中，对于请求性能有影响；同时由于请求中都带有，所以也容易出现安全问题	不参与	不参与	不参与
特点	字符串键值对在本地存储数据	字符串键值对在本地存储数据	字符串键值对在本地存储数据	IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案无法提供的能力。

同源策略

# IndexedDB

键值对储存 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
异步 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，LocalStorage 的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
支持事务 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
支持二进制储存 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象。
储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。储存在电脑上中的位置为 C:\Users\当前的登录用户\AppData\Local\Google\Chrome\User Data\Default\IndexedDB

indexedDB 的使用是比较繁琐而复杂的，有一定的学习成本，但 第三方库 localForage (opens new window) 的出现几乎抹平了这个缺陷，让我们轻松无负担的在浏览器中使用 indexedDB。

用户使用日志收集
- 在做一些前端 electron 应用，webApp, 我们可以定义一个 log 日志库，来收集用户日志，遇到问题时，可以让用户，打包上传到日志库，排查跟进解决用户反馈问题。
- 客户私有部署的，可以采用用户录制视频的方式，复现问题。 rrweb (opens new window)
request层封装，对不长更新接口缓存

封装 request 方法，缓存请求接口，物理缓存数据，让页面接口数据加载飞起来
大文件上传，分片，避免网络失败，刷新页面等导致中断问题

文件切片后先存储到 indexedDB 库，动态更新上传状态，异常状况可取出再继续定位到未上传的切片继续上传
网站文章的富文本编辑器，要求有返回上一步功能，草稿功能
股票金融类的统计图数据，数据是实时更新的，可以把已经加载过的数据缓存到本地，再次查询指定时间段的时候就减少后台压力了；当然这些场景使用本地缓存不一定是最佳方案，但是有indexedDB确实是可以优化业务的

除了 IE 和 Firefox 不支持 Web SQL，Safari 从 13 开始也舍弃了 Web SQL，目前只有基于 Chromium 系列的浏览器继续支持。