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前端電子書籍。