IndexedDB डेटा देखें और बदलें

इस गाइड में, IndexedDB डेटा देखने और उसमें बदलाव करने के लिए, Chrome DevTools का इस्तेमाल करने का तरीका बताया गया है. इसमें यह माना गया है कि आपको DevTools के बारे में जानकारी है. अगर नहीं दिखता है, तो शुरू करें देखें. इसमें यह भी माना गया है कि आपको IndexedDB के बारे में पता है. अगर ऐसा नहीं है, तो IndexedDB का इस्तेमाल करना देखें.

IndexedDB का डेटा देखना

  1. ऐप्लिकेशन पैनल खोलने के लिए, ऐप्लिकेशन टैब पर क्लिक करें. कौनसे डेटाबेस उपलब्ध हैं, यह देखने के लिए IndexedDB मेन्यू को बड़ा करें.

    IndexedDB मेन्यू

    पहली इमेज. IndexedDB मेन्यू

    • डेटाबेस का आइकॉन notes - https://mdn.github.io एक डेटाबेस को दिखाता है. इसमें notes, डेटाबेस का नाम है और https://mdn.github.io वह ऑरिजिन है जो डेटाबेस को ऐक्सेस कर सकता है.
    • ऑब्जेक्ट स्टोर का आइकॉन notes एक ऑब्जेक्ट स्टोर है.
    • टाइटल और बॉडी, इंडेक्स हैं.
  1. किसी डेटाबेस के ऑरिजिन और वर्शन नंबर को देखने के लिए, उस पर क्लिक करें.

    'नोट' डेटाबेस

    दूसरी इमेज. notes डेटाबेस

  2. किसी ऑब्जेक्ट स्टोर के की-वैल्यू पेयर देखने के लिए, उस पर क्लिक करें.

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

    तीसरी इमेज. notes ऑब्जेक्ट स्टोर

    • कुल एंट्री, ऑब्जेक्ट स्टोर में मौजूद की-वैल्यू पेयर की कुल संख्या होती है.
    • की जनरेटर वैल्यू, अगली उपलब्ध कुंजी है. यह फ़ील्ड सिर्फ़ की जनरेटर का इस्तेमाल करने पर दिखता है.
  3. वैल्यू कॉलम में किसी सेल पर क्लिक करके, उस वैल्यू को बड़ा करें.

    IndexedDB की वैल्यू देखना

    चौथी इमेज. IndexedDB की वैल्यू देखना

  4. ऑब्जेक्ट स्टोर को उस इंडेक्स की वैल्यू के हिसाब से क्रम में लगाने के लिए, नीचे दी गई इमेज 6 में टाइटल या बॉडी जैसे किसी इंडेक्स पर क्लिक करें.

    इंडेक्स के हिसाब से ऑब्जेक्ट स्टोर को क्रम से लगाना

    पांचवीं इमेज. ऑब्जेक्ट स्टोर, जिसे टाइटल कुंजी के हिसाब से, अंग्रेज़ी वर्णमाला के क्रम में लगाया गया है

IndexedDB का डेटा रीफ़्रेश करना

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

डेटाबेस देखना

छठी इमेज. डेटाबेस देखना

IndexedDB डेटा में बदलाव करना

ऐप्लिकेशन पैनल से, IndexedDB की कुंजियों और वैल्यू में बदलाव नहीं किया जा सकता. हालांकि, DevTools के पास पेज के कॉन्टेक्स्ट का ऐक्सेस होता है. इसलिए, DevTools में ऐसा JavaScript कोड चलाया जा सकता है जो IndexedDB डेटा में बदलाव करता है.

स्निपेट की मदद से IndexedDB डेटा में बदलाव करना

स्निपेट, DevTools में JavaScript कोड के ब्लॉक को सेव और चलाने का एक तरीका है. स्निपेट चलाने पर, नतीजा Console में लॉग हो जाता है. IndexedDB डेटाबेस में बदलाव करने वाले JavaScript कोड को चलाने के लिए, स्निपेट का इस्तेमाल किया जा सकता है.

IndexedDB के साथ इंटरैक्ट करने के लिए स्निपेट का इस्तेमाल करना

सातवीं इमेज. IndexedDB के साथ इंटरैक्ट करने के लिए स्निपेट का इस्तेमाल करना

IndexedDB का डेटा मिटाना

IndexedDB का की-वैल्यू पेयर मिटाना

  1. IndexedDB ऑब्जेक्ट स्टोर देखना.
  2. उस की-वैल्यू पेयर पर क्लिक करें जिसे मिटाना है. DevTools, इसे नीले रंग में हाइलाइट करता है, ताकि यह पता चल सके कि इसे चुना गया है.

    की-वैल्यू पेयर को मिटाने के लिए उसे चुनना

    आठवीं इमेज. की-वैल्यू पेयर को मिटाने के लिए उसे चुनना

  3. Delete बटन दबाएं या चुने गए आइटम मिटाएं चयनित हटाएं पर क्लिक करें.

    की-वैल्यू पेयर मिटाने के बाद, ऑब्जेक्ट स्टोर कैसा दिखता है

    नौवीं इमेज. की-वैल्यू पेयर मिटाने के बाद, ऑब्जेक्ट स्टोर कैसा दिखता है

किसी ऑब्जेक्ट स्टोर में मौजूद सभी की-वैल्यू पेयर मिटाना

  1. IndexedDB ऑब्जेक्ट स्टोर देखना.

    ऑब्जेक्ट स्टोर देखना

    10वीं इमेज. ऑब्जेक्ट स्टोर देखना

  2. ऑब्जेक्ट स्टोर मिटाएं ऑब्जेक्ट स्टोर मिटाना पर क्लिक करें.

IndexedDB डेटाबेस मिटाना

  1. वह IndexedDB डेटाबेस देखें जिसे मिटाना है.
  2. डेटाबेस मिटाएं पर क्लिक करें.

    'डेटाबेस मिटाएं' बटन

    11वीं इमेज. डेटाबेस मिटाएं बटन

IndexedDB का सारा स्टोरेज मिटाना

  1. स्टोरेज खाली करें पैनल खोलें.
  2. पक्का करें कि IndexedDB चेकबॉक्स चालू हो.
  3. साइट डेटा मिटाएं पर क्लिक करें.

    'स्टोरेज खाली करें' पैनल

    12वीं इमेज. स्टोरेज खाली करें पैनल