从 JavaScript IndexedDB 读取数据

2025 年 3 月 18 日 | 6 分钟阅读

indexedDB 数据库显示表格或数据库中的数据。它用于获取键信息、值以及数据库中的所有内容。

以下是从 javascript indexedDB 读取数据的几种方法和函数。

读取对象存储的键内容。
读取对象存储的索引内容。
读取对象存储的全部内容。

读取对象存储的键内容。

使用对象存储的 get() 方法根据其键读取和获取对象。下面的 getNamesById() 函数根据 ID 查找 Name。

语法

以下方法和函数读取对象存储的键数据。

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

function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

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

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

"30" 是 indexedDB 数据库用于获取信息的 id。
如果 id 不可用，则会发生错误事件并调用 error 函数。

示例

示例显示了可用数据，并通过 success 和 error 事件显示了不可用数据。

示例 1

该示例使用 javascript 函数显示对象存储的键值。如果 indexedDB 的 id 可用，则 success 事件会显示输出。如果 id 不可用，则 error 事件会显示输出。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</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
// use the auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
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;
getNamesById(db_variable, 3);
};
</script>
</html>

输出

下图显示了使用 success 事件通过索引 id 读取的数据。

示例 2

该示例使用 javascript get() 函数显示对象存储的键值。如果 indexedDB 数据库的 id 不可用，则 error 事件会显示输出。我们可以使用 error 事件或 error 消息作为输出。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</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 through auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
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;
getNamesById(db_variable, 30);
};
</script>
</html>

输出

下图显示了使用 error 事件通过索引 id 读取的数据。

读取对象存储的索引内容。

使用索引() 方法中的对象存储来读取和获取索引列值。下面的 getNamesByRank() 函数查找对象的排名。

语法

以下方法和函数读取对象存储的键数据。

使用 id 获取键信息的 create 函数。
function getNamesByRank(db_variable, rank) {

const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
const index_data = store_variable.index('rank');
let query_variable = index_data.get(rank);
query_variable.onsuccess = (event) => {
console.table(event.target.result);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

"onsuccess" 事件以表格格式显示索引列数据。

request.onsuccess = (event) => {
const db_variable = event.target.result;
getNamesByRank(db_variable, 'second');
};

示例

该示例使用 javascript 函数显示对象存储的索引值。如果 indexedDB 的 id 可用，则 success 事件会显示输出。如果 id 不可用，则 error 事件会显示输出。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</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 through auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, Rank) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(Rank);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${Rank} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
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;
getNamesById(db_variable, 2);
};
</script>
</html>

输出

下图显示了从数据库中获取所需信息。

读取对象存储的全部内容。

indexedDB 数据库使用 javascript 函数、事件和方法读取和显示可用数据。

语法

以下演示了如何使用游标读取 Contacts 对象存储中的每个对象。

function getAllContacts(db_variable) {
const index_data = db_variable.transaction('Names', "readonly");
const objectStore = index_data.objectStore('Names');
objectStore.openCursor().onsuccess = (event) => {
let cursor = event.target.result;
if (cursor) {
let contact = cursor.value;
console.log(contact);
cursor.continue();
}
};
index_data.oncomplete = function () {
db_variable.close();
};

说明

可以通过 objectStore.openCursor() 返回的游标来遍历对象存储。
您必须指定一个 onsuccess 处理程序才能使用游标遍历对象存储中的对象。
游标由 event.target.result 返回。您可以使用游标检索数据。
continue() 方法将对象存储的游标向前移动到可用记录的位置。
为了显示 Contacts 对象存储中的所有信息，以下代码在 onsuccess 事件处理程序中调用 getAllContacts() 函数。

request.onsuccess = (event) => {
const db_variable = event.target.result;
// get all contact details
getAllContacts(db_variable);
};

示例

该示例显示了浏览器的支持，并使用 javascript 调用一个事件来向 IndexedDb 显示数据。该函数使用 insert 事件存储多个数据，并显示数据库中所有可用的数据。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title> JavaScript IndexedDb Demo </title>
   </head>
   <body>
      <h2> JavaScript IndexedDb Demo </h2>
      <p id = "demos"> </p>
      <p id = "demo2"> </p>
   </body>
   <script>
   const request = indexedDB.open('DB_name', 1);
    // create the Names object store and index id
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Names object for auto-increment id
     let store_variable = db_variable.createObjectStore('Names', {
         autoIncrement: true
     });
     // create an index on the email property,
     let index_data = store_variable.createIndex('email', 'email', {
         unique: true
     });
 };
      function getAllContacts(db_variable) {
    const index_data = db_variable.transaction('Names', "readonly");
    const objectStore = index_data.objectStore('Names');
    objectStore.openCursor().onsuccess = (event) => {
        let cursor = event.target.result;
        if (cursor) {
            let contact = cursor.value;
            console.log(contact);
            // go on the next record
            cursor.continue();
        }
    };
    // close the given database connection
    index_data.oncomplete = function () {
        db_variable.close();
    };
    // get the Names object store_variable
    const store_variable = text_data.objectStore('Names');
    let db_que = store_variable.put(name);
    // operate success event
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error event
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the database once the 
    // transaction completes
    text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
    const db_variable = event.target.result;
    // get all contacts available in indexedDB
    getAllContacts(db_variable);
};
 </script>
</html>

输出

下图显示了使用 data 变量读取的数据。

结论

indexedDB 数据库提供了一种使用索引、键和数据库名称读取数据的方法。我们可以根据需要读取和显示全部数据和特定数据。

下一主题从 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 中的变量不是 NULL

如何在 JavaScript 中获取父元素

Npm 更新库和 Npm 列表

JavaScript insertBefore

JavaScript 中的 PreviousSibling 属性

JavaScript Select Option

使用 JavaScript 遍历数组对象