Sign upSign InSign upSign InSuman KumarFollowLevel Up Coding--ListenShareHave you ever heard about IndexedDB? If not then what an Indexeddb is?IndexedDB, short for Indexed Database, is a low-level, web-based database system that is part of the web platform’s set of APIs (Application Programming Interfaces). It provides a way for web applications to store and manage structured data on the client side (in the user’s web browser) for offline access, caching, and improved performance.Some key characteristics and features of IndexedDB:ImplementationNow, we know what an indexedDB is. Let’s create a CRUD application with IndexedDB and ReactJs and understand the implementation step by step.First, we will check if the given browser has an indexedDB or not. We will define a const “idb” and assign the indexed object to it.In the above code, we are checking whether the window object has the indexedDB or not, and here the “window.indexedDB” refers to Chrome, “window.mozIndexedDB” refers to Firefox, etc.Now, when our application loads the first time we will push two records in our database “test-db” in the “userData” collection.Let’s create a function “insertDataInIndexedDb” for this, in which we will first check if the browser has an indexedDB or not.Now, we will create a connection to the database “test-db” and the same script will create a DB if it does not exist.First, we will listen to the “onerror” method and check if there’s any error in connecting to the database.Then, we will listen to the “onupgradeneeded” method, if it is successfully connected then we will create “userData” collection and define “keyPath” as “id”. FYI “keyPath” is the same as “_id” in the MongoDB.Below is the sample data which we want to add to the collection “userData”.Now, we will listen to the “onsuccess” method on “request”. It will run after the other two methods and we will push the above data into the userData collection in this method. For inserting we will user “add” query on collection “userData”.Now, if you check the developer tools of your browser, you will find the ‘test-db’ database and ‘userData’ collection.Now, that we have inserted the data, let’s try to fetch this data from indexedDB.We will create a function “getAllData” in which we will establish a connection with DB and in the ‘onsuccess’ method we will run the transaction to get the userData as read-only.And we will run the “userData.getAll()” query to get the users. Then, on the “onsuccess” method of this query, we will get the results and set it in the local state.So, now after adding these users to the table, it will look like this.Now, we will create a form to add a user to the “userData” collection.To submit the data of this form to the DB, we will create a function “handleSubmit”. In this function, we will first establish a connection with the database. And if the connection is successful then we will run the “put” method to insert data in DB. “Put” will be an upsert method based on “id” and after the successful execution of the query, we will close the DB connection.The same, function will work for the “Update” query. Here we will set a variable in the state “addUser” to differentiate between add and edit functions.Now, the final is the delete function. In which we will run the “delete” query and after the successful query we will get the updated data and we will close the DB connection.And if you check in the browser dev tools, you can see the data like this.So, that’s all about the basic implementation of indexedDB.GitHub Repo- https://github.com/sumankalia/Indexed_db_implementation/tree/mainWorking Example- https://6512df0746f0680b2a3164a9--snazzy-marshmallow-03c5f5.netlify.app/Link to watch the same implementation tutorial in Hindi on YouTube.If you like the above article, please clap on it.Thanks for reading.----Level Up CodingFull Stack Web Developer - I am a programming enthusiast with a passion for solving problems and creating innovative solutions.Suman KumarinLevel Up Coding--Victor TimiinLevel Up Coding--27Arslan AhmadinLevel Up Coding--17Suman Kumar--Roopal Jasnani--2Amanpreet SinghinStackademic--1Payal Gaikwad--1Giorgi Anakidze--Sandeep Agrawal--Jeswanth ReddyinVersion 1--15HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams