浏览器数据库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>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

相关阅读:
JavaScript——变量
 MasterAlign相机参数设置-曝光时间调节
 【ROS1学习-01】使用ROS系统进行相关代码开发，使用docker解决环境问题，遇到一些奇怪问题，总结汇总下，开始学习研究
 【进击的JavaScript｜高薪面试必看】JS基础-异步
 stm32---用外部中断实现红外接收器
 git搜索历史上曾经的文本内容
 Mysql高级
 第四代智能井盖传感器，万宾科技助力城市安全
 在Linux/Ubuntu/Debian中使用 `tee` 命令将输出显示在终端并写入文件中
 SAP UI5 第二代表达式语言的一些特性介绍
原文地址：https://blog.csdn.net/weixin_68658847/article/details/134032234