IndexedDB के साथ काम करना

इस गाइड में IndexedDB API. हम जेक आर्चिबाल्ड की indexedDB का वादा किया गया लाइब्रेरी, जो IndexedDB API से काफ़ी मिलती-जुलती है, लेकिन इसमें प्रॉमिस का इस्तेमाल किया जाता है, जो कम अवधि का सिंटैक्स पाने के लिए, await करें. यह एपीआई को आसान बनाता है, जबकि वह भी लंबे समय तक बरकरार रखे.

IndexedDB क्या है?

IndexedDB एक बड़ा, NoSQL स्टोरेज सिस्टम है, जो उपयोगकर्ता के ब्राउज़र में मौजूद किसी भी चीज़ के बारे में जानकारी. सामान्य खोज के अलावा, पाएं और और IndexedDB, लेन-देन की सुविधा भी देता है. साथ ही, यह इस तरह के डेटा को सेव नहीं किया जा सकता.

हर IndexedDB डेटाबेस किसी ऑरिजिन के लिए यूनीक होता है (आम तौर पर, यह साइट डोमेन या सबडोमेन होता है). इसका मतलब है कि इसे ऐक्सेस नहीं किया जा सकता या इसे ऐक्सेस नहीं किया जा सकता किसी अन्य ऑरिजिन के लिए है. इसके डेटा स्टोरेज की सीमाएं वे आम तौर पर बड़े होते हैं, बशर्ते वे मौजूद हों, लेकिन अलग-अलग ब्राउज़र सीमाओं को संभालते हैं और डेटा हटाने की प्रोसेस अलग है. इसके लिए आगे पढ़ें सेक्शन देखें ज़्यादा जानकारी देखें.

IndexedDB शब्द

डेटाबेस

IndexedDB का सबसे ऊंचा लेवल. इसमें ऑब्जेक्ट स्टोर होते हैं, जो बदले में को शामिल नहीं किया जा सकता है. आपके पास एक से ज़्यादा डेटाबेस बनाने का विकल्प होता है आप चाहे जो भी नाम चुनें.

ऑब्जेक्ट स्टोर

डेटा स्टोर करने के लिए अलग-अलग बकेट, जो रिलेशनल डेटाबेस में टेबल की तरह काम करती है. आम तौर पर, हर टाइप के लिए एक ऑब्जेक्ट स्टोर होता है (JavaScript डेटा नहीं डेटा का प्रकार) चुनें. डेटाबेस टेबल के उलट, JavaScript डेटा ज़रूरी नहीं है कि स्टोर में अलग-अलग तरह के डेटा का एक जैसा हो. उदाहरण के लिए, अगर कोई ऐप्लिकेशन में people ऑब्जेक्ट स्टोर है, जिसमें तीन लोगों की जानकारी है लोगों की उम्र की प्रॉपर्टी 53, 'twenty-five', और unknown हो सकती है.

इंडेक्स

किसी दूसरे ऑब्जेक्ट स्टोर में डेटा को व्यवस्थित करने के लिए एक तरह का ऑब्जेक्ट स्टोर (जिसे रेफ़रंस ऑब्जेक्ट स्टोर) का डेटा). इस इंडेक्स का इस्तेमाल किया गया है का इस्तेमाल करें. उदाहरण के लिए, अगर आपको स्टोर करने से पहले, आप उन्हें बाद में उनके नाम, आयु या आपका पसंदीदा जानवर.

कार्रवाई

डेटाबेस के साथ इंटरैक्शन.

लेन-देन

किसी ऑपरेशन या ऑपरेशन के ग्रुप के चारों ओर मौजूद रैपर, जो डेटाबेस को पक्का करता है रखरखाव के लिए ज़रूरी है. अगर लेन-देन की कोई एक कार्रवाई पूरी नहीं होती, तो उनमें से कोई भी कार्रवाई पूरी नहीं होगी लागू हो जाता है और डेटाबेस उसी स्थिति में वापस आ जाता है, जैसा वह ट्रांज़ैक्शन से पहले था शुरू हुआ. IndexedDB में सभी पढ़ने या लिखने की कार्रवाइयों को लेन-देन का हिस्सा होना चाहिए. इससे समस्याओं के जोखिम के बिना, ऐटॉमिक रीड-इन-राइट ऑपरेशन को मदद मिलती है दूसरे थ्रेड एक साथ डेटाबेस पर काम करते हैं.

कर्सर

किसी डेटाबेस में मौजूद कई रिकॉर्ड पर फिर से काम करने का तरीका.

IndexedDB सहायता की जांच करने का तरीका

IndexedDB करीब-करीब दुनिया भर में काम करता है. हालांकि, अगर पुराने ब्राउज़र का इस्तेमाल किया जा रहा है, तो सुविधा का पता लगाने की सुविधा काम करती है. window को देखने का सबसे आसान तरीका है ऑब्जेक्ट:

function indexedDBStuff () {
  // Check for IndexedDB support:
  if (!('indexedDB' in window)) {
    // Can't use IndexedDB
    console.log("This browser doesn't support IndexedDB");
    return;
  } else {
    // Do IndexedDB stuff here:
    // ...
  }
}

// Run IndexedDB code:
indexedDBStuff();

डेटाबेस खोलने का तरीका

IndexedDB की मदद से, आपके पास चुने गए किसी भी नाम से कई डेटाबेस बनाने का विकल्प है. अगर आपने जब आप उसे खोलने की कोशिश करते हैं तो डेटाबेस मौजूद नहीं होता, तब वह अपने-आप बना. डेटाबेस को खोलने के लिए, idb लाइब्रेरी में मौजूद openDB() तरीके का इस्तेमाल करें:

import {openDB} from 'idb';

async function useDB () {
  // Returns a promise, which makes `idb` usable with async-await.
  const dbPromise = await openDB('example-database', version, events);
}

useDB();

इस तरीके से ऐसा प्रॉमिस मिलता है जो डेटाबेस ऑब्जेक्ट तक पहुंचता है. इसका इस्तेमाल करते समय: openDB() तरीका, सेट करने के लिए कोई नाम, वर्शन नंबर, और कोई इवेंट ऑब्जेक्ट दें डेटाबेस में रखा जा सकता है.

यहां कॉन्टेक्स्ट में openDB() तरीके का एक उदाहरण दिया गया है:

import {openDB} from 'idb';

async function useDB () {
  // Opens the first version of the 'test-db1' database.
  // If the database does not exist, it will be created.
  const dbPromise = await openDB('test-db1', 1);
}

useDB();

पहचान छिपाने वाले फ़ंक्शन के सबसे ऊपर, IndexedDB सहायता के लिए चेक को रखें. यह अगर ब्राउज़र IndexedDB के साथ काम नहीं करता है, तो फ़ंक्शन से बाहर निकल जाता है. अगर फ़ंक्शन यह कर सकता है जारी रखें, तो यह 'test-db1' नाम के डेटाबेस को खोलने के लिए, openDB() तरीके को कॉल करता है. इस उदाहरण में, चीज़ों को बनाए रखने के लिए, वैकल्पिक इवेंट ऑब्जेक्ट को छोड़ दिया गया है आसान है, लेकिन IndexedDB के साथ कोई भी काम का काम करने के लिए, आपको इसे तय करना होगा.

ऑब्जेक्ट स्टोर के साथ काम करने का तरीका

IndexedDB डेटाबेस में एक या उससे ज़्यादा ऑब्जेक्ट स्टोर होते हैं और हर एक में कॉलम, और दूसरा कॉलम उसी कुंजी से संबद्ध डेटा के लिए होता है.

ऑब्जेक्ट स्टोर बनाएं

अच्छी तरह से स्ट्रक्चर किए गए IndexedDB डेटाबेस में हर टाइप के लिए एक ऑब्जेक्ट स्टोर होना चाहिए को बनाए रखना ज़रूरी है. उदाहरण के लिए, कोई साइट जो उपयोगकर्ता बनी रहती है प्रोफ़ाइलों और नोट में, people ऑब्जेक्ट स्टोर हो सकता है, जिसमें person शामिल है ऑब्जेक्ट हैं और एक notes ऑब्जेक्ट स्टोर है, जिसमें note ऑब्जेक्ट हैं.

डेटाबेस इंटिग्रिटी पक्का करने के लिए, ऑब्जेक्ट स्टोर को सिर्फ़ openDB() कॉल में मौजूद इवेंट ऑब्जेक्ट. इवेंट ऑब्जेक्ट, upgrade() दिखाता है तरीका है जो आपको ऑब्जेक्ट स्टोर बनाने देता है. कॉल करें createObjectStore() ऑब्जेक्ट स्टोर बनाने के लिए upgrade() विधि के अंदर विधि:

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('example-database', 1, {
    upgrade (db) {
      // Creates an object store:
      db.createObjectStore('storeName', options);
    }
  });
}

createStoreInDB();

इस तरीके में ऑब्जेक्ट स्टोर का नाम और एक वैकल्पिक कॉन्फ़िगरेशन होता है ऑब्जेक्ट है, जो आपको ऑब्जेक्ट स्टोर के लिए अलग-अलग प्रॉपर्टी तय करने देता है.

यहां createObjectStore() के इस्तेमाल का उदाहरण दिया गया है:

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db1', 1, {
    upgrade (db) {
      console.log('Creating a new object store...');

      // Checks if the object store exists:
      if (!db.objectStoreNames.contains('people')) {
        // If the object store does not exist, create it:
        db.createObjectStore('people');
      }
    }
  });
}

createStoreInDB();

इस उदाहरण में, इवेंट ऑब्जेक्ट को बनाने के लिए openDB() तरीके को पास किया गया है ऑब्जेक्ट स्टोर बनाने का काम पूरा हो जाता है और पहले की तरह, ऑब्जेक्ट स्टोर बनाने का काम पूरा हो जाता है इवेंट ऑब्जेक्ट की upgrade() तरीके में. हालांकि, क्योंकि ब्राउज़र किसी कोई गड़बड़ी हुई है अगर आप पहले से मौजूद ऑब्जेक्ट स्टोर बनाने की कोशिश करते हैं, तो हमारा सुझाव है कि createObjectStore() तरीके को ऐसे if स्टेटमेंट में रैप करना जो जांच करता है ऑब्जेक्ट स्टोर मौजूद है या नहीं. if ब्लॉक के अंदर, कॉल करें 'firstOS' नाम का ऑब्जेक्ट स्टोर बनाने के लिए, createObjectStore().

प्राथमिक कुंजियां कैसे तय करें

ऑब्जेक्ट स्टोर तय करते समय, यह तय किया जा सकता है कि प्राथमिक कुंजी का उपयोग करके स्टोर कर सकते हैं. आप की पाथ या की जनरेटर का इस्तेमाल करके भी ऐसा किया जा सकता है.

मुख्य पाथ ऐसी प्रॉपर्टी होती है जो हमेशा मौजूद रहती है और इसमें यूनीक वैल्यू होती है. इसके लिए उदाहरण के लिए, people ऑब्जेक्ट स्टोर के मामले में, ईमेल पता चुना जा सकता है पते को मुख्य पाथ के तौर पर चुनें:

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        db.createObjectStore('people', { keyPath: 'email' });
      }
    }
  });
}

createStoreInDB();

यह उदाहरण 'people' नाम का एक ऑब्जेक्ट स्टोर बनाता है और email को असाइन करता है प्रॉपर्टी को keyPath विकल्प में प्राथमिक कुंजी के रूप में सेट करें.

आपके पास की जनरेटर का इस्तेमाल करने का भी विकल्प है, जैसे कि autoIncrement. की जनरेटर ऑब्जेक्ट स्टोर में जोड़े गए हर ऑब्जेक्ट के लिए एक यूनीक वैल्यू बनाता है. डिफ़ॉल्ट रूप से, अगर किसी पासकोड की जानकारी नहीं दी जाती है, तो IndexedDB एक कुंजी बनाता है और उसे अलग से स्टोर करता है से निकाल दिया गया है.

नीचे दिया गया उदाहरण 'notes' नाम का एक ऑब्जेक्ट स्टोर बनाता है और प्राथमिक कुंजी को स्वचालित रूप से बढ़ती हुई संख्या के रूप में असाइन किए जाने के लिए:

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('notes')) {
        db.createObjectStore('notes', { autoIncrement: true });
      }
    }
  });
}

createStoreInDB();

नीचे दिया गया उदाहरण पिछले उदाहरण के जैसा है, लेकिन इस बार अपने-आप बढ़ने वाली वैल्यू, 'id' नाम की प्रॉपर्टी के लिए साफ़ तौर पर असाइन की जाती है.

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('logs')) {
        db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createStoreInDB();

कुंजी तय करने का तरीका आपके डेटा पर निर्भर करता है. अगर आपके डेटा में ऐसी प्रॉपर्टी होती है जो हमेशा यूनीक होती है, तो आप इसे keyPath बना सकते हैं, ताकि इस खासियत को लागू करें. अगर ऐसा नहीं है, तो अपने-आप बढ़ने वाली वैल्यू का इस्तेमाल करें.

यह कोड, तीन ऑब्जेक्ट स्टोर बनाता है. ये ऑब्जेक्ट स्टोर के अलग-अलग तरीकों को दिखाते हैं ऑब्जेक्ट स्टोर में मुख्य कुंजियां तय करने के लिए:

import {openDB} from 'idb';

async function createStoresInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        db.createObjectStore('people', { keyPath: 'email' });
      }

      if (!db.objectStoreNames.contains('notes')) {
        db.createObjectStore('notes', { autoIncrement: true });
      }

      if (!db.objectStoreNames.contains('logs')) {
        db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createStoresInDB();

इंडेक्स तय करने का तरीका

इंडेक्स एक तरह के ऑब्जेक्ट स्टोर होते हैं. इनका इस्तेमाल, रेफ़रंस से डेटा पाने के लिए किया जाता है किसी बताई गई प्रॉपर्टी से ऑब्जेक्ट स्टोर करें. इंडेक्स, रेफ़रंस ऑब्जेक्ट के अंदर होता है में समान डेटा रखता है और उसमें समान डेटा शामिल होता है, लेकिन वह निर्दिष्ट प्रॉपर्टी का उपयोग कुंजी का पाथ शामिल कर लें. इंडेक्स तब बनाए जाने चाहिए, जब इसकी मदद से, अपने ऑब्जेक्ट स्टोर बनाए जाते हैं. साथ ही, इसका इस्तेमाल आपके आपका डेटा.

इंडेक्स बनाने के लिए, createIndex() पर कॉल करें तरीका:

import {openDB} from 'idb';

async function createIndexInStore() {
  const dbPromise = await openDB('storeName', 1, {
    upgrade (db) {
      const objectStore = db.createObjectStore('storeName');

      objectStore.createIndex('indexName', 'property', options);
    }
  });
}

createIndexInStore();

इस तरीके से इंडेक्स ऑब्जेक्ट बनता है और नतीजे मिलता है. createIndex() तरीका चालू है ऑब्जेक्ट स्टोर का इंस्टेंस नए इंडेक्स का नाम है और दूसरा आर्ग्युमेंट डेटा की उस प्रॉपर्टी को दिखाता है जिसे इंडेक्स करें. आखिरी आर्ग्युमेंट की मदद से, दो विकल्प बताए गए हैं. इनसे यह तय होता है कि इंडेक्स काम करता है: unique और multiEntry. अगर unique को true पर सेट किया जाता है, तो इंडेक्स एक कुंजी के लिए डुप्लीकेट मानों की अनुमति नहीं देता है. इसके बाद, multiEntry यह तय करता है कि इंडेक्स की गई प्रॉपर्टी, एक अरे होने पर createIndex() कैसे काम करती है. अगर आपने इसे true पर सेट किया जाता है. createIndex(), हर अरे के लिए इंडेक्स में एक एंट्री जोड़ता है एलिमेंट. ऐसा नहीं करने पर, यह अरे वाली एक एंट्री जोड़ देता है.

यहां एक उदाहरण दिया गया है:

import {openDB} from 'idb';

async function createIndexesInStores () {
  const dbPromise = await openDB('test-db3', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        const peopleObjectStore = db.createObjectStore('people', { keyPath: 'email' });

        peopleObjectStore.createIndex('gender', 'gender', { unique: false });
        peopleObjectStore.createIndex('ssn', 'ssn', { unique: true });
      }

      if (!db.objectStoreNames.contains('notes')) {
        const notesObjectStore = db.createObjectStore('notes', { autoIncrement: true });

        notesObjectStore.createIndex('title', 'title', { unique: false });
      }

      if (!db.objectStoreNames.contains('logs')) {
        const logsObjectStore = db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createIndexesInStores();

इस उदाहरण में, 'people' और 'notes' ऑब्जेक्ट स्टोर के इंडेक्स हैं. यहां की यात्रा पर हूं इंडेक्स बनाएं, पहले createObjectStore() (एक ऑब्जेक्ट) का नतीजा असाइन करें स्टोर ऑब्जेक्ट) को किसी वैरिएबल में स्टोर करें, ताकि आप उस पर createIndex() को कॉल कर सकें.

डेटा का इस्तेमाल कैसे करें

इस सेक्शन में डेटा बनाने, पढ़ने, अपडेट करने, और मिटाने का तरीका बताया गया है. ये ऑपरेशन सभी एसिंक्रोनस होते हैं. प्रॉमिस का इस्तेमाल करके यह इंडेक्स किया जाता है कि IndexedDB API जहां ज़रूरत के मुताबिक काम करता है अनुरोध. यह एपीआई को इस्तेमाल करना आसान बनाता है. इससे ट्रिगर हुए इवेंट को सुनने के बजाय अनुरोध करते हैं, तो आप.then() डेटाबेस के साथ इंटरैक्शन शुरू करने का openDB() तरीका या await बनाना.

IndexedDB में सभी डेटा कार्रवाइयां, एक लेन-देन के अंदर की जाती हैं. हर ऑपरेशन का यह रूप होता है:

1. डेटाबेस ऑब्जेक्ट पाएं.
2. डेटाबेस पर ट्रांज़ैक्शन की जानकारी देखें.
3. लेन-देन करने पर ऑब्जेक्ट स्टोर खोलें.
4. ऑब्जेक्ट स्टोर पर कार्रवाई करें.

ट्रांज़ैक्शन को किसी ऑपरेशन या ग्रुप का सुरक्षित रैपर माना जाता है के संचालन का एक उदाहरण है. अगर लेन-देन में से कोई एक कार्रवाई पूरी नहीं हो पाती, तो कार्रवाइयों को रोल बैक कर दिया गया है. ट्रांज़ैक्शन एक या उससे ज़्यादा ऑब्जेक्ट स्टोर के लिए होते हैं, इसे तय करते हैं. इन्हें सिर्फ़ पढ़ा जा सकता है या नहीं और लिखना. इससे पता चलता है कि लेन-देन के अंदर की कार्रवाईयां डेटा पर क्लिक करें या डेटाबेस में बदलाव करें.

डेटा बनाएं

डेटा सेव करने के लिए, add() पर कॉल करें विधि का इस्तेमाल करें और वह डेटा पास करें जिसे आप जोड़ना चाहते हैं. add() तरीके का पहला तर्क वह ऑब्जेक्ट स्टोर है जिसमें आप डेटा जोड़ना चाहते हैं और दूसरा आर्ग्युमेंट एक ऐसा ऑब्जेक्ट है जिसमें आपकी पसंद के फ़ील्ड और उनसे जुड़ा डेटा होता है जोड़ें. यहां सबसे आसान उदाहरण दिया गया है, जिसमें डेटा की एक लाइन जोड़ी गई है:

import {openDB} from 'idb';

async function addItemToStore () {
  const db = await openDB('example-database', 1);

  await db.add('storeName', {
    field: 'data'
  });
}

addItemToStore();

add() का हर कॉल, लेन-देन के दौरान होता है. भले ही, प्रॉमिस रिज़ॉल्व हो जाए नहीं है, तो इसका मतलब यह नहीं है कि ऑपरेशन काम कर चुका है. यह सुनिश्चित करने के लिए जोड़ने की कार्रवाई पूरी की गई है, तो आपको यह जांचना होगा कि पूरी तरह से transaction.done() तरीके का इस्तेमाल करके लेन-देन पूरा हुआ. यह है ऐसा प्रॉमिस जो लेन-देन के पूरा होने पर हल हो जाता है. साथ ही, अगर लेन-देन से जुड़ी गड़बड़ियां हो सकती हैं. सभी "लिखने" के लिए, आपको यह जांच करनी होगी कार्रवाइयां, क्योंकि डेटाबेस में हुए बदलावों के बारे में जानने का यही आपका एकमात्र तरीका है हुआ है.

नीचे दिया गया कोड, लेन-देन में add() तरीके के इस्तेमाल के बारे में बताता है:

import {openDB} from 'idb';

async function addItemsToStore () {
  const db = await openDB('test-db4', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('foods')) {
        db.createObjectStore('foods', { keyPath: 'name' });
      }
    }
  });
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Add multiple items to the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.add({
      name: 'Sandwich',
      price: 4.99,
      description: 'A very tasty sandwich!',
      created: new Date().getTime(),
    }),
    tx.store.add({
      name: 'Eggs',
      price: 2.99,
      description: 'Some nice eggs you can cook up!',
      created: new Date().getTime(),
    }),
    tx.done
  ]);
}

addItemsToStore();

डेटाबेस खोलने के बाद (और अगर ज़रूरत हो, तो एक ऑब्जेक्ट स्टोर बनाने के बाद), आपको transaction() तरीके को कॉल करके लेन-देन खोला जा सकता है. यह तरीका जिस स्टोर पर आप लेन-देन करना चाहते हैं उसका तर्क और मोड लेता है. इस मामले में हम स्टोर को लिखित रूप से सूचित करना चाहते हैं, इसलिए यह उदाहरण 'readwrite' तय करता है.

अगला चरण, ट्रांज़ैक्शन के हिस्से के तौर पर स्टोर में आइटम जोड़ना शुरू करना है. पिछले उदाहरण में, हमने 'foods' पर तीन कार्रवाइयां देखी हैं स्टोर में मौजूद हर एक प्रॉमिस:

1. स्वादिष्ट सैंडविच का रिकॉर्ड जोड़ रही हूँ.
2. कुछ अंडों के लिए रिकॉर्ड जोड़ा जा रहा है.
3. लेन-देन पूरा होने की सूचना देने वाला नंबर (tx.done).

ये सभी कार्रवाइयां वादे पर आधारित होती हैं, इसलिए हमें इन सभी उन्हें पूरा किया जा सकता है. इन वादों को पूरा करना Promise.all यह काम पूरा करने का एक अच्छा और आसान तरीका है. Promise.all ऐसे कलेक्शन को स्वीकार करता है इसका मकसद पूरा होता है. इसके लिए, इसमें दिए गए सभी वादों का समाधान हो जाता है.

जोड़े जा रहे दो रिकॉर्ड के लिए, ट्रांज़ैक्शन इंस्टेंस का store इंटरफ़ेस add() को कॉल करता है और डेटा को उसे पास करता है. Promise.all कॉल को await किया जा सकता है ताकि लेन-देन पूरा होने के बाद यह प्रक्रिया पूरी हो जाए.

डेटा पढ़ने की अनुमति दें

डेटा देखने के लिए, get() पर कॉल करें विधि का इस्तेमाल करें, जिसे आप openDB() तरीके का इस्तेमाल करके फिर से हासिल करते हैं. get(), स्टोर का नाम और आपके ऑब्जेक्ट की प्राइमरी वैल्यू को लेता है को वापस पाना है. यहां एक सामान्य उदाहरण दिया गया है:

import {openDB} from 'idb';

async function getItemFromStore () {
  const db = await openDB('example-database', 1);

  // Get a value from the object store by its primary key value:
  const value = await db.get('storeName', 'unique-primary-key-value');
}

getItemFromStore();

add() की तरह ही, get() तरीका प्रॉमिस प्रॉमिस देता है. इसलिए, अगर आप इसे await करना चाहते हैं या प्रॉमिस के .then() कॉलबैक का इस्तेमाल करें.

नीचे दिए गए उदाहरण में 'test-db4' डेटाबेस पर get() तरीके का इस्तेमाल किया गया है 'name' प्राथमिक कुंजी से एक पंक्ति पाने के लिए 'foods' ऑब्जेक्ट स्टोर:

import {openDB} from 'idb';

async function getItemFromStore () {
  const db = await openDB('test-db4', 1);
  const value = await db.get('foods', 'Sandwich');

  console.dir(value);
}

getItemFromStore();

डेटाबेस से एक पंक्ति को वापस पाना काफ़ी आसान है: ओपन डेटाबेस तैयार करें और उस पंक्ति का ऑब्जेक्ट स्टोर और प्राथमिक कुंजी मान तय करें, जिसे आप आपको डेटा चाहिए. get() तरीका प्रॉमिस रिटर्न करता है, इसलिए आप ये काम कर सकते हैं await.

डेटा अपडेट करना

डेटा अपडेट करने के लिए, put() पर कॉल करें तरीका है. put() तरीका, add() तरीके जैसा ही है और डेटा बनाने के लिए add() की जगह भी इसका इस्तेमाल किया जा सकता है. यहां एक सामान्य उदाहरण दिया गया है इनमें से put() का इस्तेमाल करके, किसी ऑब्जेक्ट स्टोर की लाइन को उसकी प्राइमरी कुंजी वैल्यू के हिसाब से अपडेट किया जा सकता है:

import {openDB} from 'idb';

async function updateItemInStore () {
  const db = await openDB('example-database', 1);

  // Update a value from in an object store with an inline key:
  await db.put('storeName', { inlineKeyName: 'newValue' });

  // Update a value from in an object store with an out-of-line key.
  // In this case, the out-of-line key value is 1, which is the
  // auto-incremented value.
  await db.put('otherStoreName', { field: 'value' }, 1);
}

updateItemInStore();

अन्य तरीकों की तरह, यह तरीका भी प्रॉमिस प्रॉमिस देता है. put() का इस्तेमाल इस तौर पर भी किया जा सकता है लेन-देन का हिस्सा नहीं है. यहां एक उदाहरण दिया गया है. इसमें पहले के 'foods' स्टोर का इस्तेमाल किया गया है जो सैंडविच और अंडों की क़ीमत अपडेट करता है:

import {openDB} from 'idb';

async function updateItemsInStore () {
  const db = await openDB('test-db4', 1);
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Update multiple items in the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.put({
      name: 'Sandwich',
      price: 5.99,
      description: 'A MORE tasty sandwich!',
      updated: new Date().getTime() // This creates a new field
    }),
    tx.store.put({
      name: 'Eggs',
      price: 3.99,
      description: 'Some even NICER eggs you can cook up!',
      updated: new Date().getTime() // This creates a new field
    }),
    tx.done
  ]);
}

updateItemsInStore();

आइटम अपडेट कैसे होते हैं, यह इस बात पर निर्भर करता है कि आपने कुंजी कैसे सेट की है. अगर आप keyPath सेट करते हैं, ऑब्जेक्ट स्टोर की हर लाइन, इनलाइन पासकोड से जुड़ी होती है. पिछले उदाहरण के ज़रिए, इस कुंजी के आधार पर पंक्तियों को अपडेट किया जाता है और के मामले में, आपको उस कुंजी को निर्दिष्ट करना होगा, ताकि ऑब्जेक्ट स्टोर है. आप एक आउट-ऑफ़-लाइन कुंजी भी autoIncrement को प्राथमिक कुंजी के तौर पर जोड़ा गया है.

डेटा मिटाएं

डेटा मिटाने के लिए, delete() पर कॉल करें ऑब्जेक्ट स्टोर पर विधि:

import {openDB} from 'idb';

async function deleteItemFromStore () {
  const db = await openDB('example-database', 1);

  // Delete a value 
  await db.delete('storeName', 'primary-key-value');
}

deleteItemFromStore();

add() और put() की तरह, इसका इस्तेमाल लेन-देन के तौर पर किया जा सकता है:

import {openDB} from 'idb';

async function deleteItemsFromStore () {
  const db = await openDB('test-db4', 1);
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Delete multiple items from the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.delete('Sandwich'),
    tx.store.delete('Eggs'),
    tx.done
  ]);
}

deleteItemsFromStore();

डेटाबेस इंटरैक्शन का स्ट्रक्चर, अन्य इंटरैक्शन के स्ट्रक्चर जैसा ही होता है कार्रवाइयां. याद रखें कि इसमें Promise.all को पास की जाने वाली श्रेणी में tx.done तरीका भी शामिल है.

सारा डेटा लोड हो रहा है

अब तक आपने स्टोर से एक बार में सिर्फ़ एक ऑब्जेक्ट को ही फ़ेच किया है. आप यह भी कर सकते हैं का इस्तेमाल करके किसी ऑब्जेक्ट स्टोर या इंडेक्स से सभी डेटा या किसी सबसेट को वापस पाना getAll() तरीका या कर्सर.

getAll() तरीका

किसी ऑब्जेक्ट स्टोर का पूरा डेटा वापस पाने का सबसे आसान तरीका, getAll() को कॉल करना है इसकी तरह:

import {openDB} from 'idb';

async function getAllItemsFromStore () {
  const db = await openDB('test-db4', 1);

  // Get all values from the designated object store:
  const allValues = await db.getAll('storeName');

  console.dir(allValues);
}

getAllItemsFromStore();

यह तरीका बिना किसी रुकावट के, ऑब्जेक्ट स्टोर के सभी ऑब्जेक्ट दिखाता है कुछ भी. यह किसी ऑब्जेक्ट स्टोर से सभी वैल्यू पाने का सबसे आसान तरीका है, लेकिन सबसे कम सुविधाजनक.

import {openDB} from 'idb';

async function getAllItemsFromStore () {
  const db = await openDB('test-db4', 1);

  // Get all values from the designated object store:
  const allValues = await db.getAll('foods');

  console.dir(allValues);
}

getAllItemsFromStore();

इस उदाहरण में, 'foods' ऑब्जेक्ट स्टोर पर getAll() को कॉल किया गया है. इससे वे सभी चीज़ें वापस आ जाती हैं 'foods' में मौजूद ऑब्जेक्ट, जिन्हें प्राइमरी बटन के हिसाब से क्रम में लगाया गया है.

कर्सर इस्तेमाल करने का तरीका

कर्सर, एक से ज़्यादा ऑब्जेक्ट को वापस पाने का बेहतर तरीका है. कर्सर चुनता है किसी ऑब्जेक्ट स्टोर में हर ऑब्जेक्ट को एक-एक करके इंडेक्स करता है, जिससे आपको कुछ करने का मौका मिलता है चुना जा सकता है. कर्सर, डेटाबेस की अन्य कार्रवाइयों की तरह, लेन-देन में काम करते हैं.

कर्सर बनाने के लिए, openCursor() पर कॉल करें ट्रांज़ैक्शन के तौर पर. इसके 'foods' स्टोर का इस्तेमाल किया जा रहा है ऊपर दिए गए उदाहरणों में बताया है कि कर्सर को आगे ले जाने के लिए, ऑब्जेक्ट स्टोर:

import {openDB} from 'idb';

async function getAllItemsFromStoreWithCursor () {
  const db = await openDB('test-db4', 1);
  const tx = await db.transaction('foods', 'readonly');

  // Open a cursor on the designated object store:
  let cursor = await tx.store.openCursor();

  // Iterate on the cursor, row by row:
  while (cursor) {
    // Show the data in the row at the current cursor position:
    console.log(cursor.key, cursor.value);

    // Advance the cursor to the next row:
    cursor = await cursor.continue();
  }
}

getAllItemsFromStoreWithCursor();

इस मामले में लेन-देन 'readonly' मोड में खुला है और इसके openCursor तरीके को कॉल किया जाता है. अगले while लूप में, पंक्ति कर्सर की मौजूदा जगह पर key और value प्रॉपर्टी दिख सकती हैं, और अपने लिए सबसे सही तरीके से इन वैल्यू पर काम किया जा सकता है है. जब आप तैयार हों, तब cursor ऑब्जेक्ट के continue() पर कॉल करें तरीका का इस्तेमाल करके अगली पंक्ति पर जाएं और कर्सर के होने पर while लूप खत्म हो जाता है डेटासेट के आखिर तक पहुँचता है.

रेंज और इंडेक्स के साथ कर्सर का इस्तेमाल करना

इंडेक्स की मदद से, आप प्राथमिक कुंजी दबाएं. आपके पास किसी भी प्रॉपर्टी पर इंडेक्स बनाने का विकल्प है, जो कि keyPath बन जाता है एक्सट्रैक्ट करने के लिए, उस प्रॉपर्टी की सीमा तय करें और getAll() या कर्सर का इस्तेमाल करके रेंज.

IDBKeyRange ऑब्जेक्ट का इस्तेमाल करके, अपनी रेंज तय करें. इनमें से कोई भी तरीका:

• upperBound().
• lowerBound().
• bound() (जो दोनों हैं).
• only().
• includes().

upperBound() और lowerBound() तरीकों की मदद से, ऊपरी और निचली सीमाएं तय की जाती हैं चुनें.

IDBKeyRange.lowerBound(indexKey);

या:

IDBKeyRange.upperBound(indexKey);

इनमें से हर एक तर्क देता है: आपके पसंदीदा आइटम के लिए इंडेक्स का keyPath मान को सबसे ज़्यादा या सबसे कम के तौर पर मार्क किया जा सकता है.

bound() वाले तरीके में ऊपरी और निचली सीमा, दोनों के बारे में बताया जाता है:

IDBKeyRange.bound(lowerIndexKey, upperIndexKey);

इन फ़ंक्शन की रेंज डिफ़ॉल्ट रूप से शामिल होती है, जिसका मतलब है कि इसमें वह डेटा जिसे सीमा की सीमाओं के रूप में तय किया गया है. इन वैल्यू को छोड़ने के लिए, इसके लिए दूसरे तर्क के रूप में true को पास करके, रेंज को खास के तौर पर तय करें lowerBound() या upperBound() या इसके तीसरे और चौथे तर्क के तौर पर निचली सीमा और सबसे ज़्यादा सीमा के लिए, bound() का इस्तेमाल कर सकते हैं.

अगला उदाहरण, 'foods' ऑब्जेक्ट में 'price' प्रॉपर्टी के लिए इंडेक्स का इस्तेमाल करता है स्टोर. अब स्टोर में एक फ़ॉर्म भी जुड़ा हुआ है, जिसमें की सीमा की ऊपरी और निचली सीमाएं हैं. इस कोड का इस्तेमाल करके, खाने की चीज़ें खोजें कीमतें तय करें:

import {openDB} from 'idb';

async function searchItems (lower, upper) {
  if (!lower === '' && upper === '') {
    return;
  }

  let range;

  if (lower !== '' && upper !== '') {
    range = IDBKeyRange.bound(lower, upper);
  } else if (lower === '') {
    range = IDBKeyRange.upperBound(upper);
  } else {
    range = IDBKeyRange.lowerBound(lower);
  }

  const db = await openDB('test-db4', 1);
  const tx = await db.transaction('foods', 'readonly');
  const index = tx.store.index('price');

  // Open a cursor on the designated object store:
  let cursor = await index.openCursor(range);

  if (!cursor) {
    return;
  }

  // Iterate on the cursor, row by row:
  while (cursor) {
    // Show the data in the row at the current cursor position:
    console.log(cursor.key, cursor.value);

    // Advance the cursor to the next row:
    cursor = await cursor.continue();
  }
}

// Get items priced between one and four dollars:
searchItems(1.00, 4.00);

उदाहरण के लिए दिया गया कोड, सबसे पहले सीमाओं के लिए वैल्यू पता करता है और यह जांच करता है कि सीमाएं मौजूद हैं. कोड का अगला ब्लॉक तय करता है कि रेंज को सीमित करने के लिए, कौनसा तरीका इस्तेमाल करना है सेट करें. डेटाबेस इंटरैक्शन में, पहले की तरह लेन-देन करें. इसके बाद, ऑब्जेक्ट स्टोर पर 'price' इंडेक्स खोलें. कॉन्टेंट बनाने 'price' इंडेक्स की मदद से, कीमत के हिसाब से आइटम खोजे जा सकते हैं.

इसके बाद, कोड इंडेक्स पर कर्सर खोलता है और रेंज में पास हो जाता है. कर्सर रेंज में पहले ऑब्जेक्ट को दिखाने वाला प्रॉमिस देता है या अगर undefined है, तो रेंज में कोई डेटा नहीं है. cursor.continue() तरीका नतीजे के तौर पर कर्सर अगले ऑब्जेक्ट को दिखाता है और लूप में तब तक चलता रहता है, जब तक आप सीमा के अंत तक पहुँचें.

डेटाबेस वर्शनिंग

openDB() तरीके को कॉल करने पर, डेटाबेस का वर्शन नंबर तय किया जा सकता है का इस्तेमाल किया जा सकता है. इस गाइड में दिए गए सभी उदाहरणों में, यह वर्शन 1 पर सेट किया गया है. हालांकि, ज़रूरत पड़ने पर, डेटाबेस को नए वर्शन में अपग्रेड किया जा सकता है उसमें कोई बदलाव कर सकता है. यदि बताया गया वर्शन, मौजूदा डेटाबेस, इवेंट ऑब्जेक्ट में upgrade कॉलबैक चालू होता है, इससे आपको डेटाबेस में नए ऑब्जेक्ट स्टोर और इंडेक्स जोड़ने की सुविधा मिलती है.

upgrade कॉलबैक में मौजूद db ऑब्जेक्ट में, एक खास oldVersion प्रॉपर्टी है, जो डेटाबेस के उस वर्शन नंबर के बारे में बताती है जिसका ऐक्सेस ब्राउज़र के पास है. आप इस वर्शन नंबर को switch स्टेटमेंट में पास करके, डेटाबेस के मौजूदा वर्शन के आधार पर, upgrade कॉलबैक में कोड जोड़ें. यहां एक उदाहरण दिया गया है:

import {openDB} from 'idb';

const db = await openDB('example-database', 2, {
  upgrade (db, oldVersion) {
    switch (oldVersion) {
      case 0:
        // Create first object store:
        db.createObjectStore('store', { keyPath: 'name' });

      case 1:
        // Get the original object store, and create an index on it:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('name', 'name');
    }
  }
});

यह उदाहरण, डेटाबेस के सबसे नए वर्शन को 2 पर सेट करता है. यह कोड कब लागू होगा सबसे पहले निष्पादित करता है, डेटाबेस अभी तक ब्राउज़र में मौजूद नहीं है, इसलिए oldVersion है 0 और switch स्टेटमेंट case 0 पर शुरू होता है. उदाहरण में, यह डेटाबेस में 'store' ऑब्जेक्ट स्टोर जोड़ता है.

खास जानकारी: switch स्टेटमेंट में, आम तौर पर हर case के बाद break होता है ब्लॉक किया है, लेकिन जान-बूझकर इसका इस्तेमाल नहीं किया गया है. इस तरह, अगर मौजूदा डेटाबेस कुछ ही वर्शन में है, या अगर यह मौजूद नहीं है, तो कोड जारी रहता है बाकी case ब्लॉक की मदद से अपडेट करें. इसलिए, उदाहरण में, ब्राउज़र case 1 के ज़रिए निष्पादन जारी रखता है, और एक name इंडेक्स बनाकर store ऑब्जेक्ट स्टोर.

'store' ऑब्जेक्ट स्टोर पर 'description' इंडेक्स बनाने के लिए, वर्शन नंबर पर टैप करें और नया case ब्लॉक इस तरह जोड़ें:

import {openDB} from 'idb';

const db = await openDB('example-database', 3, {
  upgrade (db, oldVersion) {
    switch (oldVersion) {
      case 0:
        // Create first object store:
        db.createObjectStore('store', { keyPath: 'name' });

      case 1:
        // Get the original object store, and create an index on it:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('name', 'name');

      case 2:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('description', 'description');
    }
  }
});

अगर पिछले उदाहरण में बनाया गया डेटाबेस अब भी ब्राउज़र में मौजूद है, तो इसके लागू होने पर, oldVersion 2 होता है. ब्राउज़र case 0 को स्किप करता है और case 1 में जाकर, कोड को case 2 में लागू करता है. इससे एक description बन जाता है इंडेक्स करें. इसके बाद, ब्राउज़र के वर्शन 3 का डेटाबेस होता है, जिसमें store name और description इंडेक्स वाला ऑब्जेक्ट स्टोर.

इसके बारे में और पढ़ें

नीचे दिए गए संसाधन, IndexedDB का इस्तेमाल करने के बारे में ज़्यादा जानकारी और संदर्भ मुहैया कराते हैं.

IndexedDB दस्तावेज़

• idb GitHub डेटा स्टोर करने की जगह
• indexedDB का इस्तेमाल करना
• indexedDB के पीछे के बुनियादी सिद्धांत
• इंडेक्स किए गए डेटाबेस एपीआई 3.0 की खास बातें

डेटा स्टोरेज की सीमाएं

• वेब के लिए स्टोरेज
• ब्राउज़र के स्टोरेज की सीमाएं और उसे हटाने की शर्तें