前端浏览器自带数据库增删改查操作：indexdDB的基础使用

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
		<title>indexedDB</title>
		<link href="./favicon.png">
	</head>

	<body>
		<button onclick="addDataing()">增</button>
		<button onclick="deleteDBing()">删</button>
		<button onclick="updateDBing()">改</button>
		<button onclick="getDataByKeying()">查</button>
	</body>


	<script>
		var dbName = 'helloIndexDB',
			version = 1,
			storeName = 'helloStore',
			db;



		function openDB() {
			const request = window.indexedDB.open(dbName, version)
			request.onsuccess = function(event) {
				db = event.target.result // 数据库对象
				console.log('数据库打开成功')
			}

			request.onerror = function(event) {
				console.log('数据库打开报错')
			}

			request.onupgradeneeded = function(event) {
				// 数据库创建或升级的时候会触发
				console.log('据库创建/升级成功')
				db = event.target.result // 数据库对象
				let objectStore
				if (!db.objectStoreNames.contains(storeName)) {
					objectStore = db.createObjectStore(storeName, {
						keyPath: 'id'
					}) // 创建表
					// objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段
				}
			}
		}

		openDB();


		// 添加数据
		function addData(db, storeName, data) {
			let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
			.objectStore(storeName) // 仓库对象
			.add(data)

			request.onsuccess = function(event) {
				console.log('数据写入成功')
			}

			request.onerror = function(event) {
				console.log('数据写入失败')
				throw new Error(event.target.error)
			}
		}

		// 根据id获取数据
		function getDataByKey(db, storeName, key) {
			let transaction = db.transaction([storeName]) // 事务
			let objectStore = transaction.objectStore(storeName) // 仓库对象
			let request = objectStore.get(key)

			request.onerror = function(event) {
				console.log('事务失败')
			}

			request.onsuccess = function(event) {
				console.log('主键查询结果: ', request.result)
			}
		}

		// 根据id修改数
		function updateDB(db, storeName, data) {
			let request = db.transaction([storeName], 'readwrite') // 事务对象
			.objectStore(storeName) // 仓库对象
			.put(data)

			request.onsuccess = function() {
				console.log('数据更新成功')
			}

			request.onerror = function() {
				console.log('数据更新失败')
			}
		}

		// 根据id删除数据
		function deleteDB(db, storeName, id) {
			let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)

			request.onsuccess = function() {
				console.log('数据删除成功')
			}

			request.onerror = function() {
				console.log('数据删除失败')
			}
		}





		/* ========================================== */
		function addDataing() {
			addData(db, storeName, {
				id: (new Date().getTime()).toString(), // 必须且值唯一
				name: '张三',
				age: 18,
				desc: 'helloWord'
			})
		}


		function deleteDBing() {
			let id = prompt("请输入删除的id：");
			if (id === null || id === "") {
				return alert("请输入id");
			}
			deleteDB(db, storeName, id)
		}

		function updateDBing() {
			let id = prompt("请输入修改的id：");
			if (id === null || id === "") {
				return alert("请输入id");
			}
			updateDB(db, storeName, {
				id,
				name: '张三',
				age: 20,
				desc: '修改的内容'
			})
		}

		function getDataByKeying() {
			let id = prompt("请输入获取的id：");
			if (id === null || id === "") {
				return alert("请输入id");
			}
			getDataByKey(db, storeName, id)
		}
	</script>
</html>

javascript
#js #javascript #前端大存储 #indexedDB
前端浏览器自带数据库增删改查操作：indexdDB的基础使用
https://github.com/chergn/chergn.github.io/d043ddd3c1ec/
作者
全易
发布于
2024年3月28日
许可协议