分类： 本地存储专题

Web Storage

由Goofy发布在本地存储专题

简介

Web Storage标准: https://www.w3.org/TR/webstorage/
这里主要从localStorage角度去描述。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

使用场景

  • 需要持久化一定数据的时候
  • 需要跨页面处理数据的时候

API

localStorage的API比较简单，只有增删查，改则是通新增覆盖原有的key，这里不做赘述，直接看文档。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

storage事件

当前页面使用的storage被其他页面修改时会触发StorageEvent事件

这里在理解概念时着重注意的是，“当前页面使用”，“其他页面修改”，“才会触发当前页面的StorageEvent”。
言外之意是，当前页面使用当前页面修改不会触发当前页面的StorageEvent。
事件返回的event对象详情看文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEvent

跨页面也是依赖该事件

存储大小

LocalStorage 在大部分浏览器的存储大小为5MB
如果不确定可以通过工具（或者自己写代码）去探测
https://web.dev/storage-for-the-web/

兼容性

IndexedDB

由Goofy发布在本地存储专题

简介

http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

IndexedDB 具有以下特点。

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

使用场景

需要稳定的大存储的时候可以选用该方案处理。
另外indexedDB的操作主要是异步的，避免阻塞应用程序，如果需要同步操作可以另行查看资料。

API

AP简单来说主要是创建数据库和增删改查等操作。
这里的数据库还有一个版本的概念，并且在更新版本时（大于数据库的版本时）会触发upgradeneeded事件
你可以通过这个事件来监听异步操作的完成，来处理后续逻辑。
其他API可以直接看文档，这里就不直接搬运了。

存储大小

这里每个浏览器的策略各有不同，总结来看具备以下共通特征

  • 根据硬盘大小的百分比给浏览器的存储分配空间
  • 超过目标存储大小会触发存储源的回收机制，这个机制各个浏览器也各有不同
  • 都只支持同源存取
  • 所有的源共用一套总大小（描述这一点是为了说明，理论上indexedDB是有可能比localStorage的5MB还小的）

关于存储的限制可以看一下资料：

兼容性

https://caniuse.com/indexeddb

其他

CacheStorage

由Goofy发布在本地存储专题

简介

https://developer.mozilla.org/zh-CN/docs/Web/API/Cache
Cache 接口为缓存的 Request / Response 对象对提供存储机制，例如，作为ServiceWorker 生命周期的一部分。请注意，Cache 接口像 workers 一样，是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中, 但是它不必一定要配合 service worker 使用.

使用场景

  • 从文档介绍来看CacheStorage主要是为接口请求缓存提供的存取方式，可以用来缓存一些静态文件和接口数据，达到缓存后不再请求网络的目的
  • 接口能力都是异步的
  • 该标准在ServiceWorker下面，但是也可以不再ServiceWorker的上下文内使用

API

该API分为两部分

存储大小

可以参考IndexedDB的存储大小说明
https://iwiki.woa.com/display/~feiyugao/IndexedDB

兼容性

本地存储

由Goofy发布在本地存储专题

前言

这里会从以下几个维度来分析本地存储各项技术的能力和利弊

  •  使用场景
  •  API介绍
  •  可存储的大小限制
  •  兼容性

相关技术

安全性

  • 关于安全性这边的存储方案都采用了同源可操作的存储策略
  • 若要避免DNS欺骗攻击，可以使用TLS（HTTPS）

推荐使用的组件

  • LOCALFORAGE：https://localforage.docschina.org/
    • 前端推荐使用这个，使用方式和localStorage差不多，但是要注意这个是异步的
    • 支持多方案驱动，并支持降级为localStorage
    • 源码比较少，简单易懂
  • 全栈和后端同学推荐：https://github.com/erikolson186/zangodb
    • 拟mongodb的非关系型数据库，语法使用比较相似
    • 仅支持indexedDB