本地存储方案介绍 —— KV Storage 介绍

上一篇文章我们提到了 localStorage 和 localForage，我们了解了 LS 的问题所在，以及社区中通常使用的替代 LS 的解决方案。现在，由 WICG（Web Incubator Community Group）提出了一个新的提案，一起来看看这份“真香”。

KV Storage

KV Storage (Key Value Storage 简称，文章且称之为 KVS) 的出现是因为目前越来越多的应用都在依赖和使用 localForage 等基于 IndexedDB 的存储解决方案。为了能够更好的满足开发者的需求，KVS 的提案应允而生，它的目的是旨在提供一套方便、高效的浏览器内建 API 帮助开发者摆脱第三方组件库的依赖。

KVS 的特性

在 KVS 的规范中提到的 KVS 的基本功能是提供开发者一套简单易用的异步存储 API，同时它还有一些额外的目标：

构建于 IndexedDB 之上，这避免了引入新的存储类型的麻烦并且提供了开发者在必要的情况下直接访问 IndexedDB 使用数据的可能；
现代化的 API 接口，API 命名将对齐 Javascript 中的 Map 对象；
支持隔离存储区域，有别于 LS 这种需要小心翼翼地命名存储键（key），防止值之间的覆盖。KVS 采用类似 localForage 的方式创建一个新的有别于默认的存储区域；
是一个内建模块，KVS 将基于内建模块方式而非内置为全局变量。

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script type="module">
  import { storage } from "std:kv-storage";

  (async () => {
    let pageLoadCount = await storage.get("pageLoadCount") || 0;
    ++pageLoadCount;

    document.querySelector("#count").textContent = pageLoadCount;

    await storage.set("pageLoadCount", pageLoadCount);
  })();
</script>

storage & StorageArea

KVS 提供 storage 和 StorageArea 两个对象，其中 storage 提供一个默认的 StorageArea 对象实例，而 StorageArea 则提供开发者创建不同储存区域的能力。

import { storage, StorageArea } from "std:kv-storage";

StorageArea 类

storage 对象是一个 StorageArea 类的实例，我们这里就只介绍一下 StorageArea 类。

class StorageArea {
  constructor(name)  

  set(key, value)      // 设置
  get(key)             // 获取
  delete(key)          // 删除
  clear()              // 清除

  keys()               // 返回 key 集合
  values()             // 返回 value 集合
  entries()            // 成员遍历器，返回存储条目集合，数组类型

  get backingStore()   // 返回一个 BackingStore 对象
}

首先，在构造函数中，需要传参 name，它会被用于创建一个 kv-storage:${name} 为名称的 IndexedDB 数据库。如果 name 传入了一个非字符串，那么会进行 toString 强制转换为字符串。

其他的方法和 Map 对象所提供的方法基本一致，不同的是，get、set、delete 和 clear 方法最终都会返回一个 Promise 对象。

比较需要注意的是，如果 set 方法的第二个参数是 undefined 将会导致这个 key 被删除。

BackingStore 对象

我们可以通过 storage.backingStore 的方式获得 BackingStore 对象，该对象包含了数据库名称等信息，可以被用于 IndexedDB 操作。

const { database, store, version } = storage.backingStore;
const request = indexedDB.open(database, version);
request.onsuccess = () => {
  const db = request.result;

  bulbasaurEvolve.onclick = () => {
    const transaction = db.transaction(store, "readwrite");
    const store = transaction.objectStore(store);

    store.put("bulbasaur", false);
    store.put("ivysaur", true);

    db.close();
  };
};

上面的例子展示了从 KVS 降级到 IndexedDB 的操作方法。

总结

KVS 规范从浏览器层面为我们打造一套更加高效简单的存储方案，接下来就看各大浏览器厂商的实现计划了。

参考文档

kv-storage 介绍 kv-storage 规范

mengtuifrontend / Blog