共计 2220 个字符，预计需要花费 6 分钟才能阅读完成。
相信作为 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 前端电子书籍。