一个简单的 indexedDB 应用示例

博客园 - HorseShoe2016

Ethereum 学习笔记 ---- Solidity 数据位置（Calldata, Memory, Storage）编码与布局全解析 vscode 禁用警告提示音浏览器加载 HTML 页面并执行 Javascript 的流程图 Ethereum学习笔记 ---- 多重继承中的 C3线性化算法 Ethereum学习笔记 ---- 使用 Remix 调试功能理解 bytes 在 memory 中的布局 Ethereum学习笔记 ---- 通过 Event 学习《合约ABI规范》 Javascript: Blob, File/FileReader, ArrayBuffer, ReadableStream, Response 转换方法 vscode 无法调试 golang testify suite 中的单个 test 的解决办法纯js实现 vue 组件与 vue 单文件组件对比 html 元素的 onEvent 与 addEventListener vue3 defineComponent: 使用纯 Javascript 定义组件 vue3 动态编译组件失败：Component provided template option but runtime compilation is not supported in this build of Vue Javascript Object 中，isExtensible/isSealed/isFrozen 的对比 mini-vue: 响应式数据的实现手写Promise vscode vue 插件与 emmet、tailwind css 插件冲突的解决方案 Python 安装依赖包，出现 ssl.SSLCertVerificationError 的问题，解决方法 CentOS7 源码编译安装 Python 3.8.10，开启 SSL 功能 Protocol Buffer Go (proto3) - macos 搭建 protocol buffer 环境 + Encoding 实验

HorseShoe2016 · 2024-04-09 · via 博客园 - HorseShoe2016

现代浏览器中会包含 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 2024-04-09 15:16 HorseShoe2016 阅读(145) 评论() 收藏举报

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - HorseShoe2016