相信作爲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前端電子書籍。