浏览器数据库IndexedDB的使用

以下代码复制粘贴直接运行即可

<!DOCTYPE html>
<html>

<head>
  <title>IndexedDB Example</title>
</head>

<body>
  <h1>IndexedDB Example</h1>
  <!-- 创建数据库按钮 -->
  <button onclick="initializeAndCreateDatabase()">Create Database</button>
  <!-- 添加数据按钮 -->
  <button onclick="addData()">Add Data</button>
  <!-- 读取数据按钮 -->
  <button onclick="readData()">Read Data</button>
  <!-- 更新数据按钮 -->
  <button onclick="updateData()">Update Data</button>
  <!-- 删除数据按钮 -->
  <button onclick="deleteData()">Delete Data</button>
  <script>
    let db

    // 打开数据库或创建新数据库
    function openDatabase () {
      return new Promise((resolve, reject) => {
        // 尝试打开名为 "MyDatabase" 版本号为 1 的数据库
        const request = window.indexedDB.open("MyDatabase", 1)
        request.onerror = function (event) {
          reject(event.target.errorCode)
        }
        request.onsuccess = function (event) {
          // 成功打开数据库
          resolve(event.target.result)
        }
        request.onupgradeneeded = function (event) {
          // 数据库需要升级时执行，创建对象存储空间和索引
          const db = event.target.result
          const objectStore = db.createObjectStore("MyObjectStore", { keyPath: "id", autoIncrement: true })
          // 创建一个名为 "name" 的索引，不要求唯一
          objectStore.createIndex("name", "name", { unique: false })
          resolve(db)
        }
      })
    }

    // 初始化并创建数据库
    async function initializeAndCreateDatabase () {
      // 异步打开数据库
      db = await openDatabase()
      console.log("Database opened successfully.")
    }

    // 添加数据
    async function addData () {
      if (!db) {
        await initializeAndCreateDatabase()
      }
      const transaction = db.transaction(["MyObjectStore"], "readwrite")
      const objectStore = transaction.objectStore("MyObjectStore")
      const newData = { name: "John Doe" }
      const request = objectStore.add(newData)
      request.onsuccess = function (event) {
        // 数据成功添加
        console.log("Data added to the database.")
      }
      request.onerror = function (event) {
        console.error("Error adding data: " + event.target.error)
      }
    }

    // 读取数据
    async function readData () {
      if (!db) {
        await initializeAndCreateDatabase()
      }
      const transaction = db.transaction(["MyObjectStore"], "readonly")
      const objectStore = transaction.objectStore("MyObjectStore")
      const request = objectStore.openCursor()
      request.onsuccess = function (event) {
        const cursor = event.target.result
        if (cursor) {
          console.log("ID: " + cursor.value.id + ", Name: " + cursor.value.name)
          cursor.continue()
        } else {
          console.log("No more data.")
        }
      }
    }

    // 更新数据
    async function updateData () {
      if (!db) {
        await initializeAndCreateDatabase()
      }

      const transaction = db.transaction(["MyObjectStore"], "readwrite")
      const objectStore = transaction.objectStore("MyObjectStore")
      const request = objectStore.put({ id: 1, name: "Updated Name" })

      request.onsuccess = function (event) {
        // 数据成功更新
        console.log("Data updated.")
      }
      request.onerror = function (event) {
        console.error("Error updating data: " + event.target.error)
      }
    }

    // 删除数据
    async function deleteData () {
      if (!db) {
        await initializeAndCreateDatabase()
      }
      const transaction = db.transaction(["MyObjectStore"], "readwrite")
      const objectStore = transaction.objectStore("MyObjectStore")
      const request = objectStore.delete(1)
      request.onsuccess = function (event) {
        // 数据成功删除
        console.log("Data deleted.")
      }
      request.onerror = function (event) {
        console.error("Error deleting data: " + event.target.error)
      }
    }
  </script>
</body>

</html>