从 JavaScript IndexedDB 删除数据

2025年3月18日 | 阅读时长 4 分钟

我们可以使用 JavaScript IndexedDB 函数删除数据库中的单个或多个数据。我们可以使用键值或 ID 来删除整个数据库行。

在 JavaScript IndexedDB 中删除数据的过程

以下过程步骤有助于删除信息。要从对象存储中删除数据，我们遵循以下步骤：

首先，创建 JavaScript IndexedDB 的新事务。
其次，获取带有数据和 ID 的对象存储。
第三，调用对象存储的 delete() 方法删除信息。
最后，关闭数据库的事务连接。

语法

以下方法和函数使用对象存储的键删除数据。

用于通过 ID 获取键信息的创建函数。

function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete(id);
query_variable.onsuccess = (event) => {
console.table(event);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

"onsuccess" 事件以表格格式显示 ID 数据。

request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 30);
};

"30" 是 IndexedDB 数据库用于删除信息的 ID。
如果 ID 不可用，则会发生错误事件，并且数据不会被删除。

示例

示例 1

该示例使用对象存储的键值，通过 JavaScript 函数删除数据。如果 IndexedDB 的 ID 不可用，则错误事件和消息将作为输出显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Deleted JavaScript IndexedDb Demo </h2>
<p id = "value1"></p>
<p id = "value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete('id');
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo");
console.log(`The email of the ${id} id deleted successfully`);
} else {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo " +event ;
document.getElementById("value2").innerHTML = "The deleted data successfully of the " +id+ " id";
console.log(event);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 2);
};
</script>
</html>

输出

以下输出显示了数据库中已删除数据的成功事件。

示例 2

该示例使用对象存储的键值，通过 JavaScript 函数删除数据。如果 IndexedDB 的 ID 不可用，则错误事件和消息将作为输出显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Delete JavaScript IndexedDb Demo </h2>
<p id ="value1"></p>
<p id ="value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete('id');
query_variable.onsuccess = (event) => {
if (!event.target.result) {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo Error";
document.getElementById("value2").innerHTML = "The Name of the " +id+ " id does not found";
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.log(event);
console.log("data deleted successfully");
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 29);
};
</script>
</html>

输出

以下输出显示了在数据库中删除数据的错误。

Example3

该示例使用对象存储的键值，通过 JavaScript 函数删除数据。如果 IndexedDB 的 ID 不可用，则错误事件和消息将作为输出显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Deleted JavaScript IndexedDb Demo </h2>
<p id = "value1"></p>
<p id = "value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.clear();
query_variable.onsuccess = (event) => {
if (!event.target.result) {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo " ;
document.getElementById("value2").innerHTML = "The deleted all data successfully";
} else {
console.log("JavaScript IndexedDb Demo Error");
console.log(event);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable);
};
</script>
</html>

输出

以下输出显示了在数据库中删除所有数据的成功事件。

结论

使用 ID 删除不需要的数据是数据库的一项重要功能。IndexedDB 数据库使用简单的方法进行工作。

下一个主题JavaScript 中的 NextSibling 属性

← 上一个下一个 →

从 JavaScript IndexedDB 删除数据

在 JavaScript IndexedDB 中删除数据的过程

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

从 JavaScript IndexedDB 删除数据

在 JavaScript IndexedDB 中删除数据的过程

语法

示例

结论

相关帖子

JavaScript NaN 函数

JavaScript 工厂函数

如何在 JavaScript 中移除对象的键/属性

JavaScript querySelector

JavaScript 代码编辑器

JavaScript change 事件

JavaScript onmousewheel 事件

如何在我的浏览器中启用 JavaScript

如何迭代 JavaScript 对象

JavaScript 计算器

订阅 Tpoint Tech

联系信息

关注我们