The indexedDB database presents the information contained within its tables or databases. It serves the purpose of retrieving key details, values, and all data stored in the database.
There are the following methods and functions to read data from javascript indexedDB.
- Read an object store's key contents.
- Read an object store's index contents.
- Read an object store's entire contents.
Read an object store's key contents.
Utilize the get method of the object store to retrieve and obtain an object corresponding to its key. The function getNamesById illustrated below locates a Name using its ID.
Syntax
The subsequent method and functions are designed to retrieve essential data from the object store.
- The create function is utilized to obtain key information associated with the specified id.
- The "onsuccess" event presents the ID data organized in a table format.
- The "30" is the id of the indexedDB database to get information.
- If the id is unavailable, an error event occurs and gets an error function.
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();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
getNamesById(db_variable, 30);
};
Examples
The examples illustrate the data that is accessible, but they do not depict the data concerning both successful and error events.
Example 1
The illustration demonstrates the principal value of the object store by utilizing a JavaScript function. When the indexedDB identifier is present, the success event will display the results. Conversely, if the identifier is not present, the error event will provide the corresponding output.
<!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>
Output
The image below displays the retrieved data associated with the index identifier, indicating a successful event.
Example 2
The illustration demonstrates the primary value of the object store by utilizing the JavaScript get method. In the event that the identifier for the indexedDB database is not accessible, an error event will provide the corresponding output. We have the option to employ either an error event or an error message as the form of output.
<!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>
Output
The image below illustrates the read data associated with the index identifier that has encountered an error event.
Read an object store's index contents.
Utilize the object stores within the index method to access and retrieve the value of the indexed column. The function getNamesByRank presented below determines the rank of the given object.
Syntax
The subsequent method and functions are responsible for retrieving the essential data from the object store.
- The create function is utilized to acquire key details using the specified id.
- function getNamesByRank(db_variable, rank) {
- The "onsuccess" event displays the index column information in a tabular format.
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();
};
};
request.onsuccess = (event) => {
const db_variable = event.target.result;
getNamesByRank(db_variable, 'second');
};
Examples
The illustration demonstrates the index value of the object store utilizing a JavaScript function. When the ranking of indexedDB is accessible, the success event will present the results. Conversely, if the identifier is not found, the error event will display the output instead.
<!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>
Output
The image displayed below presents the necessary data retrieved from the database.
Read an object store's whole contents.
The indexedDB database utilizes JavaScript functions, events, and methods to access and present the data that is available.
Syntax
The subsequent example illustrates the process of retrieving each object from the Contacts object storage by employing a cursor:
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();
};
Explanation
- The cursor returned by objectStore.openCursor can be used to loop through an object store.
- You must designate an onsuccess handler to use the cursor to loop across the objects in an object store.
- The cursor is returned by event.target.result. You can use the cursor to retrieve the data.
- The object store's cursor is moved forward by the continue method to the location of the available record.
- To display all information from the Contacts object storage, the following invokes the getAllContacts function in the onsuccess event handler.
request.onsuccess = (event) => {
const db_variable = event.target.result;
// get all contact details
getAllContacts(db_variable);
};
Example
The illustration demonstrates the capability of the browser to support IndexedDB and presents information through an event triggered by JavaScript. This function employs an insert event to save multiple entries and displays all the data that exists within the database.
<!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>
Output
The image below illustrates the data that has been read, represented by the data variable.
Conclusion
The indexedDB database provides a functionality that allows for data retrieval through the use of an index, a key, and the name of the database. This enables us to access and showcase both complete datasets and particular pieces of information according to our needs.