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

技术分享 7个月前 (08-29) 0 999+

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

页面大概长这样：

源码：

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

<div>   <button id="js_add_btn">添加书籍</button> </div> <div>   <input type="text" name="" id="js_book_id" placeholder="输入书籍ID"/>   <button id="js_get_by_id_btn">查询书籍</button>   <button id="js_update_by_id_btn">更新书籍</button>   <button id="js_delete_by_id_btn">删除书籍</button> </div> <div>   <input type="text" name="" id="js_book_author" placeholder="输入书籍作者查询"/><button id="js_get_by_author_btn">查询书籍</button> </div> <div>   <button id="js_get_all_btn">查询所有书籍</button> </div> <div id="output"></div>  <script>   (() => {     // 数据库配置     const dbName = 'MyDB';     const storeName = 'books';     const output = document.getElementById('output')     let db = null;      function setOutputContent(html) {       output.innerText = html;     }      // 初始化数据库     const initDB = () => {       const request = indexedDB.open(dbName);        // 数据库升级/创建时触发       request.onupgradeneeded = (event) => {         db = event.target.result;          // 创建对象存储空间（类似数据库表）         const store = db.createObjectStore(storeName, {           keyPath: 'id', // 主键           autoIncrement: true, // 自动生成ID         });          // 创建索引（允许通过作者查询）         store.createIndex('author_idx', 'author', { unique: false });          console.log('数据库已创建/升级');       };        // 数据库打开成功       request.onsuccess = (event) => {         db = event.target.result;         console.log('数据库已打开');       };        // 数据库打开失败       request.onerror = (event) => {         console.error('数据库错误:', event.target.error);         setOutputContent('数据库错误');       };     };      // 封装包装函数，用于执行数据库相关方法     function wrapper(func) {       return new Promise((resolve, reject) => {         const transaction = db.transaction([storeName], 'readwrite');         const store = transaction.objectStore(storeName);         const res = func(store)         res.onsuccess = () => {           resolve(res.result)         };          res.onerror = (event) => {           reject(event.target.error)         };       });     }      // 添加数据     const addBook = async (book) => {       try {         const result = await wrapper((store) => store.add(book))         console.log(result);         setOutputContent(`添加成功！书籍ID: ${result}`);       } catch (error) {         console.error(error);         setOutputContent('添加失败');       }     };      // 通过ID查询数据     const getBook = async (id) => {       try {         const book = await wrapper((store) => store.get(id))         if (book) {           console.log('查询结果:', book);           setOutputContent(`书名: ${book.title}n作者: ${book.author}n价格: $${book.price}`);         } else {           console.log('未找到书籍');           setOutputContent('未找到该书籍');         }       } catch (error) {         console.error(error);         setOutputContent('查询失败');       }     };      // 查询全部数据     const getAllBook = async () => {       try {         const book = await wrapper((store) => store.getAll())         if (book) {           console.log('查询结果:', book);           setOutputContent(`总数：${book.length}`);         } else {           console.log('未找到书籍');           setOutputContent('未找到该书籍');         }       } catch (error) {         console.error(error);         setOutputContent('查询失败');       }     };      // 更新数据--数据不存在时会添加数据     const updateBook = async (book) => {       try {         const result = await wrapper((store) => store.put(book))         console.log(result);         setOutputContent(`更新成功！结果: ${result}`);       } catch (error) {         console.error(error);         setOutputContent('更新失败');       }     };      // 删除数据     const deleteBook = async (id) => {       try {         const result = await wrapper((store) => store.delete(id))         console.log(result);         setOutputContent(`删除成功！结果: ${result}`);       } catch (error) {         console.error(error);         setOutputContent('删除失败');       }     };     // 根据作者查询     const getByAuthor = async (author) => {       try {         const result = await wrapper((store) => {           const index = store.index("author_idx");           const request = index.getAll(author);           return request;         })         console.log(result);         setOutputContent(`查询成功！结果: ${JSON.stringify(result)}`);       } catch (error) {         console.error(error);         setOutputContent('查询失败');       }     };      // 添加书籍     document.getElementById('js_add_btn').onclick = () => {       addBook({         title: 'Web前端入门',         author: '前端路引',         price: (0.99 * Math.random() + 10) .toFixed(2),       });     };      // 根据ID查询     document.getElementById('js_get_by_id_btn').onclick = () => {       const bookId = document.getElementById('js_book_id').value;       getBook(Number(bookId));     };      // 根据ID删除     document.getElementById('js_delete_by_id_btn').onclick = () => {       const bookId = document.getElementById('js_book_id').value;       deleteBook(Number(bookId));     };      // 根据ID更新     document.getElementById('js_update_by_id_btn').onclick = () => {       const bookId = document.getElementById('js_book_id').value;       updateBook({         // 主键ID         id: Number(bookId),         title: 'Web前端入门',         author: '公众号：前端路引',         price: (0.99 * Math.random() + 10) .toFixed(2),       });     };      // 根据作者查询     document.getElementById('js_get_by_author_btn').onclick = () => {       const author = document.getElementById('js_book_author').value       getByAuthor(author);     };      // 查询全部     document.getElementById('js_get_all_btn').onclick = () => {       getAllBook();     };      // 页面加载时初始化数据库     initDB();   })(); </script>

IndexedDB 大小限制

以下内容为 AI 回答：

获取可用的存储空间大小

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