Data can be inserted into an indexedDB database in JavaScript using the indexedDB function, allowing for the addition of single or multiple entries. The insertion process is based on a unique column ID, with an incrementing ID that automatically adjusts based on the data being added. Users can input values into other columns as needed. It is essential to have the unique ID, auto-increment ID, and other column IDs ready to successfully insert and store data.
The procedure of the insert data into javascript indexedDB
After establishing a successful connection to the database, we can manipulate data within the onsuccess event handler.
For example, to insert an object to a database object store, we can follow these steps:
- First, open a new transaction.
- Second, get an object store.
- Third, call the put method of the object store to insert new information.
- Finally, close the transaction connection of the indexedDB database once the operation completes.
Syntax
The insertData function below is responsible for storing a new name in the Names object store:
function insertData(db_variable, name) {
// create a new connection or new transaction
const txn_variable = db_variable.transaction('Name', 'readwrite');
// Save Names object using variable
const save_data = txn_variable.objectStore('Names');
let query = save_data.put(contact);
// handle success call of the indexedDB case
query.onsuccess = function (event) {
console.log(event);
};
// handle the error of the indexedDB case
query.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the transaction of the indexedDB database
txn_variable.oncomplete = function () {
db_variable.close();
};
}
Explanation
- You must use the IDBDatabase object's transaction function to start a new transaction.
- A transaction can be opened in either the read-write or readonly mode.
- While in readonly mode, you can only read data from the database, read-write mode enables you to access data from the database and write data to the database.
- If you only want to read information from a database, it's best to start a read-only transaction.
Once you have defined the insertName function, you can utilize the syntax below to apply it within the request for saving one or multiple contacts in the onsuccess event handler:
The code in the script tag will now run if you view the index.html file in a web browser to:
- In the IndexedDB, create the CRM database.
- In the CRM database, set up the Names object-store.
- Two records should be added to the object store.
Examples
Below are instances where individual and multiple values are stored. In these cases, the put function is employed to
Insert the data.
Example 1
The demonstration illustrates how browsers provide support for IndexedDb through a JavaScript event. Within this function, an insert event is utilized for the storage of individual data entries.
<!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 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
});
// create an index on the email property,
let index_data = store_variable.createIndex('email', 'email', {
unique: true
});
};
function insertName(db_variable, name) {
// create a new transaction
const text_data = db_variable.transaction('Names', 'readwrite');
// get the Names object store_variable
const store_variable = text_data.objectStore('Names');
let db_que = store_variable.put(name);
// operate the success case of the database
db_que.onsuccess = function (event) {
console.log(event);
};
// operate the error of the database
db_que.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the indexedDB database once the transaction completes
text_data.oncomplete = function () {
db_variable.close();
};
}
request.onsuccess = (event) => {
const db_variable = event.target.result;
insertName(db_variable, {
email: 'gacka@outlook.com',
});
insertName(db_variable, {
email: 'sejal@gmail.com',
});
};
</script>
</html>
Output
The output image displays the event that triggered the use of IndexedDB in web browsers.
Example 2
The provided demonstration illustrates how browsers endorse IndexedDB using a JavaScript event. Within this event, the function employs an "insert" operation to store several data columns simultaneously.
<!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
// with 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 insertNames(db_variable, name) {
// create a new transaction of the database
const text_data = db_variable.transaction('Names', 'readwrite');
// get the Names object store_variable
const store_variable = text_data.objectStore('Names');
let db_que = store_variable.put(name);
// operate the success case of the transaction
db_que.onsuccess = function (event) {
console.log(event);
};
// operate the error of the transaction
db_que.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the transaction of the database once operation completed
text_data.oncomplete = function () {
db_variable.close();
};
}
request.onsuccess = (event) => {
const db_variable = event.target.result;
insertNames(db_variable, {
email: 'gacka@outlook.com',
Names: 'Gauri sharma',
Rank: 'fifth',
});
insertNames(db_variable, {
email: 'samntha@gmail.com',
Names: 'Samantha seth',
Rank: 'fourth',
});
};
</script>
</html>
Output
The displayed image indicates the event that triggered the browsers to utilize IndexedDB.
Example 3
The provided demonstration adds two columns titled Names and Rank, while omitting the insertion of an email column. The function employs an insert event to save various columns of data simultaneously.
<!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
// with 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 insertName(db_variable, name) {
// create a new transaction of the database
const text_data = db_variable.transaction('Names', 'readwrite');
// get the Names object store_variable
const store_variable = text_data.objectStore('Names');
let db_que = store_variable.put(name);
// operate the success case of the transaction
db_que.onsuccess = function (event) {
console.log(event);
};
// operate the error of the transaction
db_que.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the transaction of the database once operation completed
text_data.oncomplete = function () {
db_variable.close();
};
}
request.onsuccess = (event) => {
const db_variable = event.target.result;
insertName(db_variable, {
Names: 'gauri',
Rank: '3',
});
insertName(db_variable, {
Names: 'Rani',
Rank: '2',
});
insertName(db_variable, {
Names: 'Radha',
Rank: '1',
});
};
</script>
</html>
Output
The displayed image illustrates the data that has been added, triggering events for IndexedDB in web browsers.
Conclusion
Inserting data into indexedDB is a crucial aspect of storing information. To achieve this, we can utilize a JavaScript function along with the put method.