Skip to content
Related Articles

Related Articles

Improve Article

IndexedDB | Introduction

  • Difficulty Level : Medium
  • Last Updated : 22 Jun, 2020

IndexedDB is a key-value database in the browser. It is a NoSQL Database. It is transactional, i.e. if a particular action falls within a transaction, none of the actions of that transaction is applied. This ensures the database remains consistent.

IndexedDB

Inside a database

Why use IndexedDB?

  1. The localStorage was designed for smaller amounts of data and can only store string data for keys and values whereas IndexedDB can work with a large amount of unstructured data, including Files/Blobs.
  2. It is similar to a JavaScript Object, it can also have nested objects and properties.
  3. It can be accessed asynchronously, it can be used with service workers which helps to store the data offline and once the device gains Internet access it synchronizes it to the servers.

Using IndexedDB: JavaScript is used to access IndexedDB.



  1. Open a Database –
    // Syntax
    let request = indexedDB.open(name, version);
    // name : database name, string value
    // version : version number, by default 1, positive integer
    

    The code to open a database should check if the database exists or not.




    let request = indexedDB.open("gfg", 1);
      
     request.onupgradeneeded = function() {
      // Initialize new database
     };
      
    request.onerror = function() {
      console.error("Unable to access database", request.error);
      // Logs error to the console
    };
      
    request.onsuccess = function() {
      let db = request.result;
      // Use existing database
    };
  2. Create an object store in the database –
    // Syntax
    let objectStore = db.createObjectStore(name, [keyOption]);
    // name : object store name
    // keyOption : object property key
    




    let request = indexedDB.open("gfg", 1);
      
    // Check if object store exists and
    // then creates it
    request.onupgradeneeded = function() {
      let db = request.result;
      if (!db.objectStoreNames.contains('articles')) { 
        db.createObjectStore('articles', {keyPath: 'id'});  
      }
    };
  3. Starting a transaction –
    // Syntax
    db.transaction(objectStore, type]);
    // objectStore : objectStore which is to be used
    // type : readonly or readwrite
    




    let transaction = db.transaction("articles", "readwrite");
      
    // Access an object store
    let articles = transaction.objectStore("articles");
      
    // Create an object
    let article = {
      id: 'Array',
      topic : 'Introduction to Array'
    };
      
    // Add an object 
    let request = articles.add(article);
      
    // Success
    request.onsuccess = function() {
      console.log("Article Published", request.result);
    };
      
    // Failed
    request.onerror = function() {
      console.log("Article Publish failed", request.error);
    };
  4. Close the transaction




    let transaction = db.transaction("books", "readwrite");
      
    // Conducting operations in the transaction
      
    // When transaction is over
    transaction.oncomplete = function() {
      console.log("Transaction is complete");
    };

    We can forcefully abort the transaction by transaction.abort() method.

Use of IndexedDB

The usage and implementation of IndexedDB are simple. This is how you can use IndexedDB in your code through JavaScript.




My Personal Notes arrow_drop_up
Recommended Articles
Page :