LocalStorage扩容

LocalStorage扩容

浏览器存储方案

• Cookie

  Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

  Cookie主要用于会话状态管理(登录态, 购物车等数据), 个性化设置(主题等)和浏览器行为跟踪, 存储大小约为4KB. 服务器指定Cookie后,浏览器每次请求都会带携带Cookie数据, 会有额外的开销. 随着浏览器的发展,出现了LocalStorage,SessionStorage和IndexDB, Cookie慢慢被淘汰。

• SessionStorage

为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。存储大小为5M(不同浏览器大小限制不一样)

• LocalStorage

LocalStorage具有和SessionStorage同样的功能,只是在浏览器关闭，然后重新打开后数据仍然存在。存储大小为5M(不同浏览器大小限制不一样)

• IndexDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。存储大小不能超过50M, 存在浏览器兼容性问题.

扩容方案

通过上面4种存储方案的介绍可以看出,使用IndexDB可以极大的增加存储的容量,实际开发中一般使用 localforage才操作浏览器存储. localforageAPI简洁易用, 且在不支持IndexDB的浏览器中,可以降为使用localstorage.

::: warning
浏览器的最大存储空间是动态的——它取决于您的硬盘大小。 全局限制为可用磁盘空间的50％。如果超过此范围，则会发起称为源回收的过程，删除整个源的数据，直到存储量再次低于限制。

还有另一个限制称为组限制——这被定义为全局限制的20％，但它至少有10 MB，最大为2GB。组限制也称为“硬限制”：它不会触发源回收
:::