浏览器离线存储方案

方案特性

cookie

长度有限(不超过4KB)，且每次请求都会携带上，一般只用于存储和用户状态、登录信息相关的数据。

localStorage

永久存储，API简洁明了。

不过存储容量有上限，各个浏览器容量不一致。

并且这个是不能跨域的。

这个读写是同步的，有可能会阻塞你的程序。

目前我们在大屏项目中使用得比较多，用于存储用户的非认证的数据(比如自选股列表)，以及作为异常情况下的备份数据(比如请求失败、网络异常等情况，我们会用这部分数据来保证页面正常展示)。

sessionStorage

和localStorage类似，不过这是针对会话的，并非永久存储。

indexedDB

可以理解为客户端的NoSQL，功能强大，就是操作比较麻烦，适合需要存储大量、复杂数据的场景。

是异步操作，区别于localStorage。

支持事务，可回滚。

有同源限制。

存储空间大。

支持字符串和二进制数据。

详见阮一峰的博客

目前我们在图说新闻项目中使用到了，用于存储用户的新闻配置信息、本地图片数据等。

WebSQL

这个已经废弃了，略过。

开源组件

LocalForage已经帮我们封装好了离线存储接口，能够满足我们的基本日常应用需求。