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