摘要：那么是否有既簡單并且又不阻塞主線程的呢好消息是正在嘗試一種稱為內(nèi)置模塊的新功能，計(jì)劃發(fā)布的第一個(gè)內(nèi)置模塊是名為的異步鍵值存儲(chǔ)模塊，先來了解一下什么是內(nèi)置模塊。

相信作為web開發(fā)者大家都使用過瀏覽器的本地存儲(chǔ)localStorage，它是一個(gè)會(huì)阻止主線程的同步API，只要使用就可能會(huì)阻止頁面的交互。

我們都知道瀏覽器有異步的IndexedDB作為存儲(chǔ)方案，只是它的API使用方式比localStorage要復(fù)雜很多。

那么是否有既簡單并且又不阻塞主線程的API呢？

好消息是Chrome正在嘗試一種稱為內(nèi)置模塊的新功能，計(jì)劃發(fā)布的第一個(gè)內(nèi)置模塊是名為KV Storage的異步鍵/值存儲(chǔ)模塊，先來了解一下什么是內(nèi)置模塊。

內(nèi)置模塊就像常規(guī)JavaScript 模塊一樣，唯一區(qū)別是它們不必下載，而是隨瀏覽器一起提供。

與傳統(tǒng)的Web API一樣，內(nèi)置模塊必須經(jīng)過標(biāo)準(zhǔn)化過程 - 每個(gè)模塊都有自己的規(guī)范，需要進(jìn)行設(shè)計(jì)審查，并且在發(fā)布之前需要Web開發(fā)人員和其他瀏覽器供應(yīng)商提供支持。

與傳統(tǒng)的Web API不同，內(nèi)置模塊不會(huì)在全局范圍內(nèi)公開 它們只能通過導(dǎo)入獲得。

不全局暴露內(nèi)置模塊有很多優(yōu)點(diǎn)：它們不會(huì)增加任何開銷來啟動(dòng)新的JavaScript運(yùn)行時(shí)上下文，并且不會(huì)消耗任何內(nèi)存或CPU。此外，可以避免與當(dāng)前上下文變量命名沖突的風(fēng)險(xiǎn)。

在支持的瀏覽器中，您可以使用以下代碼導(dǎo)入KV存儲(chǔ)模塊。

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

KV存儲(chǔ)模塊的簡單性與localStorage API類似，但其API形狀實(shí)際上更接近 JavaScriptMap。

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

鍵名不必是字符串。它們可以是任何結(jié)構(gòu)化可序列化類型。

與Map不同的是，所有KV存儲(chǔ)方法都返回 promises或 異步迭代器

KV存儲(chǔ)模塊對外暴露兩個(gè)變量：storage和StorageArea，其中storage是StorageArea名為"default"的默認(rèn)實(shí)例。

以下是如何在代碼中使用KV存儲(chǔ)模塊的示例：

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();

對于不支持內(nèi)置模塊的瀏覽器，std:kv-storage無法識(shí)別成有效的URL，這時(shí)可以通過引入polyfill解決，但如果瀏覽器支持內(nèi)置模塊，我們更希望的是優(yōu)先使用內(nèi)置提供的模塊，這就需要一個(gè)導(dǎo)入映射的功能，也是chrome正在嘗試的一個(gè)新功能。

導(dǎo)入映射本質(zhì)上是一種機(jī)制，開發(fā)人員可以通過該機(jī)制將導(dǎo)入標(biāo)識(shí)符另起別名，這可以為瀏覽器無法識(shí)別std:kv-storage的時(shí)侯提供備用路徑。

代碼示例：

上面代碼中的關(guān)鍵點(diǎn)是URL /path/to/kv-storage-polyfill.mjs 被映射到兩個(gè)不同的資源：std:kv-storage和 /path/to/kv-storage-polyfill.mjs。

因此，當(dāng)瀏覽器遇到引用該URL（/path/to/kv-storage-polyfill.mjs）的import語句時(shí)，它首先嘗試加載std:kv-storage，如果不能，則它會(huì)回退到加載 /path/to/kv-storage-polyfill.mjs。

# 那么根本不支持模塊的瀏覽器呢?

為了使用導(dǎo)入映射有條件地加載內(nèi)置模塊，必須實(shí)際使用導(dǎo)入語句，這也意味著必須使用模塊腳本，即