聊一聊常见的浏览器数据存储方案( 六 ) _数据存储

这里总共有六部分：

为了对数据库执行操作，我们必须创建一个 schema，一个 schema 可以是单个操作，也可以是多个必须全部成功的操作，否则都不会成功；
这里用来获取 cars object store 的引用以及对应的索引；
object store 上的 put 方法用于将数据添加到数据库中；
这里就是数据的查询，可以使用 keyPath 的值直接查询项目（第14行）；第15行中的 getAll 方法将返回一个包含它找到的每个结果的数组，我们正在根据 cars_colour 索引来搜索 Red，应该会查找到两个结果。第16行根据复合索引查找颜色为Blue，并且品牌为 Honda 的结果。
搜索成功的事件处理函数，它们将在查询完成时触发。
最后，在事务完成时关闭与数据库连接。无需使用 IndexedDB 手动触发事务，它会自行运行。

运行上面的代码，就会得到以下结果：

文章插图

可以在 Chrome Devtools 中查看：

文章插图

下面来看看如何更新和删除数据。

更新：首先使用个 get 来获取需要更新的数据，然后使用 store 上的 put 方法更新现有数据。put 是一种“插入或更新”方法，它要么覆盖现有数据，要么在新数据不存在时插入新数据。

const subaru = store.get(4);subaru.onsuccess= function () {subaru.result.colour = "Green";store.put(subaru.result);}这会将数据库中 Silver 色的 Subaru 的颜色更新为绿色。

删除：可以使用 delete API 来删除数据，最简单的方法是通过其 key 来删除：

const deleteCar = store.delete(1);deleteCar.onsuccess = function () {console.log("Removed");};如果不知道 key 并且希望根据值来删除，可以这样：

const redCarKey = colourIndex.getKey(["Red"]);redCarKey.onsuccess = function () {const deleteCar = store.delete(redCarKey.result);deleteCar.onsuccess = function () {console.log("Removed");};};

结果如下：

文章插图

5. 存储空间分析可以使用基于 Promise 的 Storage API 检查 Web Storage、IndexedDB 和 Cache API 的剩余空间。异步 .estimate() 方法返回：

quota 属性：可用的空间；
usage 属性：已用的空间。

(async () => {if (!navigator.storage) return;const storage = await navigator.storage.estimate();console.log(`可用大小: ${ storage.quota / 1024 } Kb`);console.log(`已用大小: ${ storage.usage / 1024 } Kb`);console.log(`已用占比: ${ Math.round((storage.usage / storage.quota) * 100) }%`);console.log(`剩余大小: ${ Math.floor((storage.quota - storage.usage) / 1024) } Kb`);})();

Storage API 的浏览器兼容性如下：