CRUD Operations using IndexedDB
Table of contents
No headings in the article.
C - Create
R - Read
U - Update
D - Delete
Create a record in IndexedDB.
async function create(data) {
return new Promise((resolve, reject) => {
// create indexedDB instance
const indexedDB = window.indexedDB;
// If instance not found throw error
if(!indexedDB){
reject("Error");
}
// open indexedDB request
const request = indexedDB.open("TEST", 1); // DB NAME, VERSION
// If error occured then throw error
request.onError = function(error) {
reject("Error: ", error);
}
// If any upgrade needed it will run this code block e.g. change in version, change in structure of object
request.onupgradeneeded = function(request) {
const db = request?.result;
const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
// store.createIndex("<index name>", "<property name>", { unique: false});
}
request.onsuccess = function(){
// get a db instance;
const db = request.result;
// create transaction instance
const txn = db.transaction("TEST_STORE", "readwrite");
// create store instance
const store = txn.objectStore("TEST_STORE");
// add/update data to store
store.put({...data});
txn.oncomplete = function(){
db.close();
resolve("success);
}
}
})
}
DELETE
async function create(id) {
return new Promise((resolve, reject) => {
// create indexedDB instance
const indexedDB = window.indexedDB;
// If instance not found throw error
if(!indexedDB){
reject("Error");
}
// open indexedDB request
const request = indexedDB.open("TEST", 1); // DB NAME, VERSION
// If error occured then throw error
request.onError = function(error) {
reject("Error: ", error);
}
// If any upgrade needed it will run this code block e.g. change in version, change in structure of object
request.onupgradeneeded = function(request) {
const db = request?.result;
const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
// store.createIndex("<index name>", "<property name>", { unique: false});
}
request.onsuccess = function(){
// get a db instance;
const db = request.result;
// create transaction instance
const txn = db.transaction("TEST_STORE", "readwrite");
// create store instance
const store = txn.objectStore("TEST_STORE");
// delete all/ delete specific record from store
if(id){
store.delete(id);
} else {
store.clear();
}
txn.oncomplete = function(){
db.close();
resolve("success);
}
}
})
}
READ:
async function create(id) {
return new Promise((resolve, reject) => {
// create indexedDB instance
const indexedDB = window.indexedDB;
// If instance not found throw error
if(!indexedDB){
reject("Error");
}
// open indexedDB request
const request = indexedDB.open("TEST", 1); // DB NAME, VERSION
// If error occured then throw error
request.onError = function(error) {
reject("Error: ", error);
}
// If any upgrade needed it will run this code block e.g. change in version, change in structure of object
request.onupgradeneeded = function(request) {
const db = request?.result;
const store = db.createOjectStore("TEST_STORE", { keyPath: "id", autoIncrement: true });
// store.createIndex("<index name>", "<property name>", { unique: false});
}
request.onsuccess = function(){
// get a db instance;
const db = request.result;
// create transaction instance
const txn = db.transaction("TEST_STORE", "readwrite");
// create store instance
const store = txn.objectStore("TEST_STORE");
// read all/ specific record from store
let query;
if (id) {
query = store.get(id);
} else {
query = store.getAll();
}
query.onsucess = function() {
resolve(data: query.result);
}
txn.oncomplete = function(){
db.close();
}
}
})
}