推荐答案
// www.javascriptcn.com code example
// 打开或创建数据库
const request = indexedDB.open("MyDatabase", 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
// 创建一个对象存储空间
if (!db.objectStoreNames.contains("myStore")) {
db.createObjectStore("myStore", { keyPath: "id" });
}
};
request.onsuccess = function(event) {
const db = event.target.result;
// 开始一个事务
const transaction = db.transaction("myStore", "readwrite");
const store = transaction.objectStore("myStore");
// 添加数据
store.add({ id: 1, name: "John Doe", age: 30 });
// 读取数据
const getRequest = store.get(1);
getRequest.onsuccess = function() {
console.log(getRequest.result);
};
// 更新数据
store.put({ id: 1, name: "John Doe", age: 31 });
// 删除数据
store.delete(1);
};
request.onerror = function(event) {
console.error("Database error: " + event.target.errorCode);
};本题详细解读
1. 打开或创建数据库
使用 indexedDB.open("MyDatabase", 1) 来打开或创建一个名为 MyDatabase 的数据库。如果数据库不存在，它会被创建。第二个参数是数据库的版本号，用于控制数据库的升级。
2. 创建对象存储空间
在 onupgradeneeded 事件中，可以创建或修改数据库的结构。在这个例子中，我们检查是否存在名为 myStore 的对象存储空间，如果不存在，则创建一个新的对象存储空间，并指定 id 作为主键。
3. 开始事务
在 onsuccess 事件中，我们通过 db.transaction("myStore", "readwrite") 开始一个事务。事务可以是只读的 (readonly) 或读写的 (readwrite)。
4. 添加数据
使用 store.add({ id: 1, name: "John Doe", age: 30 }) 向对象存储空间中添加数据。如果数据的主键已经存在，则会抛出错误。
5. 读取数据
使用 store.get(1) 来读取主键为 1 的数据。读取操作是异步的，结果会在 onsuccess 事件中返回。
6. 更新数据
使用 store.put({ id: 1, name: "John Doe", age: 31 }) 来更新数据。如果数据的主键不存在，则会添加新数据。
7. 删除数据
使用 store.delete(1) 来删除主键为 1 的数据。
8. 错误处理
在 onerror 事件中处理数据库操作中的错误。可以通过 event.target.errorCode 获取错误代码。
通过以上步骤，你可以使用 IndexedDB 在浏览器中存储和操作数据。