JavaScript 从indexedDB中删除数据

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

删除数据的过程

以下步骤帮助您删除信息。要从对象存储中删除数据，我们按照以下步骤执行：

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

语法

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

使用ID获取键信息的create函数。

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>

输出

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

JavaScript 从indexedDB中删除数据

示例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>

输出

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

JavaScript 从indexedDB中删除数据

示例3

该示例使用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>

输出

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

JavaScript 从indexedDB中删除数据