首个浏览器内置模块 kv-storage 异步版的 localStorage
浏览器内置模块 kv-storage 异步版的 localStorage
LocalStorage 大家都不陌生基本上每天都在跟他打交道。但这是个会阻塞主线程的同步 API，很多情况下存取大量数据可能会造成性能问题。?
为了解决这个问题，我们可能会使用 IndexedDB，但后者难以操作，虽然目前有第三方模块可以很轻松操作 IndexedDB，但仍然不是最好的解决方案。
有没有一种既能够像 LocalStorage 一样简单的 API，又能够拥有 IndexedDB 这样的异步存取数据的能力的前端存储解决方案呢❓
这个时候 Chrome 开发团队目前正在测试一款名为 std:kv-storage 的 浏览器内置模块 ?
啥是内置模块？
内置模块 Built-in modules 跟 JS 模块一样，只不过他并不用从远端下载下来使用，而是与浏览器绑定在一起的。
当然，这种内置模块与传统的 web API 最大的不同之处就是需要使用 esm 语法进行导入 ⬇️，这种模块并不会暴露在全局作用域中，你没办法直接通过 window.xxx 来引用，而是需要先 import
在 chrome 中内置模块的标识符是 std:
kv-storage
kv-storage 模块在 API 上与 LocalStorage 类似。常用的方法有：
- get() 读取数据
- set() 写入数据
- delete() 删除数据
- clear() 清空数据
所有的上述方法都会返回一个 Promise 对象，也就是说这些都是异步的 ?
官网规范：https://wicg.github.io/kv-storage/#storagearea
不说那么多，先来看看这个内置模块到底怎么用：
环境配置
首先我们需要一个 74 版本以上的 Chrome 浏览器，并且需要打开 chrome://flags/#enable-experimental-web-platform-features
浏览器需要支持 modules 在 Chrome 中，要求版本在 61 以上
编写演示代码
首先这里用一个 index.html 文件配合 vscode 的 Live Server 做演示
我们要做的一个简单的功能是创建一个表单，用户填写表单过程中，点击保存按钮，填写在表单内的数据都会存储在 kv-storage 中，即便用户不小心刷新了浏览器，点击恢复按钮即可恢复数据。
首先我们需要一个表单：
<form action="">
<input type="text" name="username" placeholder="username">
<input type="text" name="message" placeholder="message">
<button type="submit">保存</button>
<button type="reset">恢复</button>
</form>然后定义一个 type 为 module 的 script 标签
<script type="module"></script>
script 标签内就是我们的主要逻辑：
<script type="module">
import { storage } from 'std:kv-storage' // 首先导入内置模块 kv-storage
{
(async () => {
// 定义两个事件处理函数
document.querySelector('form').addEventListener('submit', handleClickSubmit)
document.querySelector('form').addEventListener('reset', handleClickRestore)
// 当点击保存
async function handleClickSubmit(e) {
e.preventDefault()
let inputs = document.querySelector('form').querySelectorAll('input')
let kvData = Array.from(inputs).map(item => ({ name: item.getAttribute('name'), value: item.value }))
await storage.set('formData', kvData) // 获取表单数据并保存在在 key 为 formData 的 store 中
}
// 恢复数据事件处理函数
async function handleClickRestore(e) {
let formData = await storage.get('formData') // 读取 formData 数据
document.querySelector('form').querySelectorAll('input')
formData.forEach(data => {
let { name, value } = data
document.querySelector(`input[name=${name}]`).value = value // 将数据注入 input 元素内
})
}
})()
}
</script>以上，非常简单的一个 DEMO，我们来看看效果：
输入数据并点击保存：
我们去 indexdDB 中查看数据是否保存成功：
默认在 kv-storage:default 数据库的 store 集合中出现一条 formData 数据，值就是表单数据数组
然后我们刷新浏览器并点击恢复，kv-storage 从 indexedDB 中又读取了数据并注入到表单中
即便是关闭浏览器重新打开依然能够恢复数据
主要的使用方法大概就是这样，目前位置该内置模块仍然在测试中。
兼容
官方给了一套兼容性解决方案，针对检测是否存在该内置模块的 import map 方法；还有针对是否支持 modules 的 nomodules 方案。
检测是否存在内置模块
新增标签设置 type 为 importmap 创建 importmap，当使用 import 方法引入模块的时候，按照路径首先检查是否能够通过 import {storage} from 'std:kv-storage' 引入，如果不可以，则尝试使用 polyfill import {storage} from '/path/to/kv-storage-polyfill.mjs
<!-- 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>相关文档见：https://github.com/WICG/import-maps
检测是否支持 modules
<!-- 支持 ES Modules 的浏览器加载 main.mjs -->
<script type="module" src="main.mjs"></script>
<!-- 旧浏览器不支持 ES Modules 会加载该文件，同时支持 ES Modules 会忽略这个文件 -->
<script nomodule src="main.es5.js"></script>这里附上 polyfill：https://github.com/GoogleChromeLabs/kv-storage-polyfill
Chrome 发布的 kv-storage 并不是说有多么的强大，毕竟现在 LocalForage(https://localforage.docschina.org/) 也已经在业内很频繁在用了。作为第一个内置模块，虽现在不建议在生产模式中使用，但足以遇见在不久的将来这中内置模块的方式可能成为一种趋势。
参考：
- https://github.com/WICG/kv-storage
- https://github.com/GoogleChromeLabs/kv-storage-polyfill-
腾讯云开发者
