Web前端入门第 85 问：JavaScript 一个简单的 IndexedDB 数据库入门示例

在前端风风雨雨的混了多年，从没在项目中实际使用过 IndexedDB 这个浏览器端的数据库，所以今天就摸了下 MDN 的后门，写一个简单的入门示例。
页面大概长这样：

源码：
以下代码包含了一个数据库所有的 CRUD （增删改查）操作。

1.   <button id="js_add_btn">添加书籍</button>
4.   <input type="text" name="" id="js_book_id" placeholder="输入书籍ID"/>
5.   <button id="js_get_by_id_btn">查询书籍</button>
6.   <button id="js_update_by_id_btn">更新书籍</button>
7.   <button id="js_delete_by_id_btn">删除书籍</button>
10.   <input type="text" name="" id="js_book_author" placeholder="输入书籍作者查询"/><button id="js_get_by_author_btn">查询书籍</button>
13.   <button id="js_get_all_btn">查询所有书籍</button>

复制代码

IndexedDB 大小限制

以下内容为 AI 回答：

获取可用的存储空间大小

1. navigator.storage.estimate().then((estimate) => {
2.   console.log(
3.     `已使用：`,
4.     (
5.       (estimate.usage / estimate.quota) * 100
6.     ).toFixed(2)
7.   );
8.   console.log(`可使用：`, (estimate.quota / 1024 / 1024).toFixed(2) + "MB");
9. });

复制代码

相关文档：https://developer.mozilla.org/en-US/docs/Web/API/Storage_API
写在最后

由于项目中很少使用，所以这 API 给不了太多建议~~
此 API 的应用场景还是有的，可以想想下那些超大文件在线处理应用，比如 ZIP、PSD、PPT 之类的文件，可以将文件解析后存在 IndexedDB 中，在需要的时候查询指定数据即可，这样可以节约很多的解析时间。
只是需要注意，所有存在浏览器端的数据，用户清空缓存之后都将不复存在，所以在使用时需做好容错处理~~
详细文档请参阅 MDN：https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
一个更加完善的项目：https://github.com/marco-c/eLibri

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除