KV存储：Web的第一个内置模块

相信做为web开发者你们都使用过浏览器的本地存储localStorage，它是一个会阻止主线程的同步API，只要使用就可能会阻止页面的交互。

咱们都知道浏览器有异步的IndexedDB做为存储方案，只是它的API使用方式比localStorage要复杂不少。

那么是否有既简单而且又不阻塞主线程的API呢？

好消息是Chrome正在尝试一种称为内置模块的新功能，计划发布的第一个内置模块是名为KV Storage的异步键/值存储模块，先来了解一下什么是内置模块。

内置模块

内置模块就像常规JavaScript 模块同样，惟一区别是它们没必要下载，而是随浏览器一块儿提供。

与传统的Web API同样，内置模块必须通过标准化过程 - 每一个模块都有本身的规范，须要进行设计审查，而且在发布以前须要Web开发人员和其余浏览器供应商提供支持。

与传统的Web API不一样，内置模块不会在全局范围内公开 它们只能经过导入得到。

不全局暴露内置模块有不少优势：它们不会增长任何开销来启动新的JavaScript运行时上下文，而且不会消耗任何内存或CPU。此外，能够避免与当前上下文变量命名冲突的风险。

在支持的浏览器中，您可使用如下代码导入KV存储模块。

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

KV存储模块

KV存储模块的简单性与localStorage API相似，但其API形状实际上更接近 JavaScriptMap。

除了getItem()， setItem()以及removeItem()，它还有get()， set()和delete()以及Map相似的方法，如 keys()， values()和 entries()。

键名没必要是字符串。它们能够是任何结构化可序列化类型。

与Map不一样的是，全部KV存储方法都返回 promises或 异步迭代器

KV存储模块对外暴露两个变量：storage和StorageArea，其中storage是StorageArea名为'default'的默认实例。

如下是如何在代码中使用KV存储模块的示例：

import {storage} from 'std:kv-storage';

const main = async () => {
  const oldPreferences = await storage.get('preferences');

  document.querySelector('form').addEventListener('submit', async () => {
    const newPreferences = Object.assign({}, oldPreferences, {
      // Updated preferences go here...
    });

    await storage.set('preferences', newPreferences);
  });
};

main();

若是浏览器不支持内置模块怎么办？

对于不支持内置模块的浏览器，std:kv-storage没法识别成有效的URL，这时能够经过引入polyfill解决，但若是浏览器支持内置模块，咱们更但愿的是优先使用内置提供的模块，这就须要一个导入映射的功能，也是chrome正在尝试的一个新功能。

导入映射

导入映射本质上是一种机制，开发人员能够经过该机制将导入标识符另起别名，这能够为浏览器没法识别std:kv-storage的时侯提供备用路径。

代码示例：

<!-- The import map is inlined into your page -->
<script type="importmap">
{
  "imports": {
    "/path/to/kv-storage-polyfill.mjs": [
      "std:kv-storage",
      "/path/to/kv-storage-polyfill.mjs"
    ]
  }
}
</script>

<!-- Then any module scripts with import statements use the above map -->
<script type="module">
  import {storage} from '/path/to/kv-storage-polyfill.mjs';

  // Use `storage` ...
</script>

上面代码中的关键点是URL /path/to/kv-storage-polyfill.mjs 被映射到两个不一样的资源：std:kv-storage和 /path/to/kv-storage-polyfill.mjs。

所以，当浏览器遇到引用该URL（/path/to/kv-storage-polyfill.mjs）的import语句时，它首先尝试加载std:kv-storage，若是不能，则它会回退到加载 /path/to/kv-storage-polyfill.mjs。

# 那么根本不支持模块的浏览器呢?

为了使用导入映射有条件地加载内置模块，必须实际使用导入语句，这也意味着必须使用模块脚本，即<script type="module">。

目前，超过80%的浏览器支持模块，对于不支持模块的浏览器，可使用module/nomodule技术为旧浏览器兼容。注意，在生成nomodule时，须要包含全部的polyfills，由于不支持模块的浏览器确定不支持内置模块。

PS：欢迎关注公众号「前端新视界」获取前端技术前沿资讯，后台回复“1”领取100本PDF前端电子书籍。