Indexed DB In JavaScript In Hindi | JS Indexed DB In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

JavaScript Indexed DB

जैसा कि आपको पता ही है , की कि JavaScript एक client side programming language जिसका मतलब है कि यह modern database systems जैसे MySQL , MongoDB , GraphSQL etc से communicate नहीं कर सकती है।

लेकिन data को client browser में ही temporary store करने के लिए कई functionalities provide की हैं जिनका use करके हम modern web applications को attractive और easy to use बना सकते हैं।

●●●

JS data store mechanism

JavaScript द्वारा user browser में data को temporary store करने के लिए दी गयी कुछ functionalists -

• sessionStorage

• localStorage

• Indexed DB

इन सभी का use need के according modern web applications में use होता है।

इस blog में हम Indexed DB के बारे में अच्छे से समझेंगे।

JS Indexed DB In Hindi

IndexedDB एक database है जो कि browser में ही built in होता है , यह localStorage या sessionStorage से ज्यादा powerful और reliable है। क्योंकि इसमें आप ज्यादा data save कर सकते हैं।

IndexedDB में आप almost हर तरह का data store कर सकते हैं , और data lost न हो इसके लिए इसमें transactions का भी support होता है जो इसे और ज्यादा reliable बनाता है।

IndexedDB में store किया गया data , same domain के सभी window और tabs में accessible होता है।

मतलब किसी एक window/tabs में save किये गए data को आप किसी दूसरी window/tabs में access/modify कर सकते हैं लेकिन domain same रहना चाहिए। किसी दूसरे domain में stored data को access नहीं कर सकते हैं।

●●●

JS check if browser supports indexed DB

indexedDB use करने से ये check कर लेना कि browser इसे support करता है या नहीं , एक अच्छी practice है। because कई browser इसे support नहीं करते हैं।

Copy
if ('indexedDB' in window) {
    console.log('IndexedDB is supported.');
} else {
    console.log('IndexedDB is not supported.');
}

JS open Indexed DB

किसी existing database को open या new database create करने के लिए open() function का use किया जाता है।

Syntax

idb.open(dbname, version, upgradeCallback);

• dbname : पहला argument database name है , अगर exist है तो वो open होगा otherwise नया create हो जायगा।

• version : आप same database का version भी define कर सकते हैं।

• upgradeCallback : यह Callback Function है , जिसमे आपको database instance मिलता है ताकि इसे use करके आप tables / object stores को create कर सकें।

Copy
const dbPromise = indexedDB.open('test-db', 1, function (upgradeDb) {
  console.log('database is created , now you can create object store.');
});

जब database open होता है तो 3 important events हमें handle करनी होती है onupgradeneeded, onerror और onsuccess .

अगर आप callback में object create नहीं करना चाहते तो onupgradeneeded में कर सकते हैं। database open करते time अगर कोई error आयी तो उसे आप onerror से handle कर सकते हैं।

और onsuccess में आप बाद transactions like data insert करना या update / delete करना।

●●●

JS create table in indexed DB

सबसे पहले तो , indexed DB में table को Object Store कहते हैं क्योंकि इसमें column और data key : value pair में एक object की तरह store होते हैं।

Copy
const request = indexedDB.open('MyDatabase', 1);
// This event is triggered when the database is first created or its version is updated.
request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // Create an object store named "contacts"
  const contact = db.createObjectStore('user', { keyPath: 'id', autoIncrement: true });

  // Define the structure of the data to be stored
  contact.createIndex('name', 'name', { unique: false });
  contact.createIndex('email', 'email', { unique: false });
};

तो जैसा कि आप example में देख सकते हैं , आप Object store मतलब table का complete structure define कर सकते हैं।

बैसे तो by default primary id auto incremented और default name रहता है but आप चाहो तो change कर सकते हो।

ध्यान रहे अगर Object Store पहले से exist है तो error आएगी इसलिए create करने से पहले check कर लें।

Copy
request.onupgradeneeded = function(event) {
    const db = event.target.result;

    // Create an object store only if it doesn't exist
    if (!db.objectStoreNames.contains(objectStoreName)) {
      // define structure.
    }
};

●●●

JS store data in indexed DB

data को store करने के लिए हम transaction का use करेंगे ताकि data proper set हो अगर कोई error आये।

बाकी जैसा आपका table structure है उसके according key : value pair में Object create करके add() method में pass कर दो।

Copy
const request = indexedDB.open('MyDatabase', 1);

// This event is triggered when the database is successfully opened.
request.onsuccess = function(event) {
    const db = event.target.result;

    // Start a transaction on the "user" object store.
    const transaction = db.transaction(['user'], 'readwrite');
    const objectStore = transaction.objectStore('user');

    // Add data to the object store.
    const record = { name: 'John Doe', email: 'john@gmail.com' };
    const addRequest = objectStore.add(record);

    addRequest.onsuccess = function() {
        console.log('Data added successfully.');
    };

    addRequest.onerror = function() {
        console.error('Error adding data.');
    };
  
    // Close the transaction when done.
    transaction.oncomplete = function() {
        console.log('Transaction completed.');
    };
};

ध्यान रहे कि data store करते समय transaction हमेशा readwrite mode में ही start करें , जैसा कि example में देख सकते हैं।

●●●

JS fetch data from indexed DB

Object store से सभी records को fetch करने के लिए getAll() function का use किया जाता है , जिसकी success event पर हम forEach() की help से iterate कर सकते हैं।

Copy
// Open a connection to the IndexedDB database.
const request = indexedDB.open('MyDatabase', 1);


// Handle successful database opening.
request.onsuccess = event => {
  const db = event.target.result;
  const transaction = db.transaction('user', 'readonly');
  const store = transaction.objectStore('user');
  const request = store.getAll();

  request.onsuccess = event => {
    const arr = event.target.result;
    arr.forEach(obj => {
      console.log(obj);
    });
  };
};

अब अगर थोड़ा ध्यान से देखेंगे तो transaction , readonly mode में ओपन किया गया है ।

●●●

JS find record from indexed DB

Copy
// found record where id is 1.
const request = store.get(1);
request.onsuccess = event => {
  const task = event.target.result;
  if (task) {
    console.log('Found record:', task);
  } else {
    console.log('Record not found');
  }
};

JS delete record from indexed DB

Object store से किसी particular record को delete करने के लिए transaction को readwrite mode में start करके object instance पर delete(id) method use किया जाता है।

Copy
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = event => {
  const db = event.target.result;
  const transaction = db.transaction('user', 'readwrite');
  const store = transaction.objectStore('user');
  
  // delete where is is 1.
  const request = store.delete(1);

  request.onsuccess = () => {
    console.log('User deleted');
  };

  request.onerror = () => {
    console.error('Error deleting user : ', request.error);
  };

};

I hope guys , अब आपको JavaScript में indexedDB के बारे में अच्छे से समझ आ गया होगा।

Similar topics -

• Local Storage

• Session Storage
  

●●●