随笔 - 173  文章 - 1  评论 - 26  阅读 - 43万

一个简单的 indexedDB 应用示例

现代浏览器中会包含 indexedDB,这是一个功能比 localStorage 更加强大的数据库引擎,其 API 描述详见 W3规范:IndexedDB

如下是一个简单的应用示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js"></script>
    <title>IndexedDB BookStore</title>
  </head>
  <body>
    <button onclick="addBook()">Add a book</button>
    <button onclick="clearBooks()">Clear books</button>

    <p>Books list:</p>

    <ul id="listElem"></ul>

    <script>
      let db

      init()

      async function init() {
        // 这里的 idb 就是 'https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js' 生成的
        // indexedDB 的别名
        db = await idb.openDb('booksDb', 1, (db) => {
          db.createObjectStore('books', { keyPath: 'name' })
        })

        list()
      }

      async function list() {
        let tx = db.transaction('books')
        let bookStore = tx.objectStore('books')

        let books = await bookStore.getAll()

        if (books.length) {
          listElem.innerHTML = books
            .map(
              (book) => `<li>
        name: ${book.name}, price: ${book.price}
      </li>`
            )
            .join('')
        } else {
          listElem.innerHTML = '<li>No books yet. Please add books.</li>'
        }
      }

      async function clearBooks() {
        let tx = db.transaction('books', 'readwrite')
        await tx.objectStore('books').clear()
        await list()
      }

      async function addBook() {
        let name = prompt('Book name?')
        let price = +prompt('Book price?')

        let tx = db.transaction('books', 'readwrite')

        try {
          await tx.objectStore('books').add({ name, price })
          await list()
        } catch (err) {
          if (err.name == 'ConstraintError') {
            alert('Such book exists already')
            await addBook()
          } else {
            throw err
          }
        }
      }

      window.addEventListener('unhandledrejection', (event) => {
        alert('Error: ' + event.reason.message)
      })
    </script>
  </body>
</html>
posted on   HorseShoe2016  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示