इस गाइड में, IndexedDB डेटा को देखने और उसमें बदलाव करने के लिए, Chrome DevTools का इस्तेमाल करने का तरीका बताया गया है. इसलिए, आपको DevTools के बारे में पता है. अगर ऐसा नहीं है, तो शुरू करें को देखें. इसमें यह भी माना जाता है कि आपको IndexedDB के बारे में पता है. अगर नहीं, तो IndexedDB का इस्तेमाल करना देखें.
IndexedDB डेटा देखें
ऐप्लिकेशन पैनल खोलने के लिए, ऐप्लिकेशन टैब पर क्लिक करें. उपलब्ध डेटाबेस को देखने के लिए, IndexedDB मेन्यू को बड़ा करें.
पहला डायग्राम. IndexedDB मेन्यू
नोट -
https://mdn.github.io एक डेटाबेस के बारे में बताता है, जहां notes डेटाबेस का नाम होता है और https://mdn.github.io वह ऑरिजिन है जो डेटाबेस को ऐक्सेस कर सकता है.
नोट एक ऑब्जेक्ट स्टोर है.- टाइटल और बॉडी, इंडेक्स होते हैं.
किसी डेटाबेस के ऑरिजिन और उसका वर्शन नंबर देखने के लिए, उस पर क्लिक करें.
दूसरा डायग्राम. notes डेटाबेस
किसी ऑब्जेक्ट स्टोर के की-वैल्यू पेयर को देखने के लिए उस पर क्लिक करें.
तीसरी इमेज. notes ऑब्जेक्ट स्टोर
- कुल एंट्री, ऑब्जेक्ट स्टोर में की-वैल्यू पेयर की कुल संख्या है.
- मुख्य जनरेटर वैल्यू, अगली उपलब्ध कुंजी है. यह फ़ील्ड सिर्फ़ कुंजी जनरेटर का इस्तेमाल करने पर ही दिखता है.
वैल्यू को बड़ा करने के लिए, वैल्यू कॉलम के किसी सेल पर क्लिक करें.
चौथा डायग्राम. IndexedDB वैल्यू देखना
ऑब्जेक्ट स्टोर को उस इंडेक्स की वैल्यू के मुताबिक क्रम से लगाने के लिए, नीचे दी गई इमेज 6 में टाइटल या body जैसे इंडेक्स पर क्लिक करें.
पांचवीं इमेज. ऐसा ऑब्जेक्ट स्टोर जिसे title कुंजी के मुताबिक, अंग्रेज़ी वर्णमाला के क्रम में लगाया गया हो
IndexedDB डेटा को रीफ़्रेश करें
ऐप्लिकेशन पैनल में IndexedDB वैल्यू, रीयल-टाइम में अपडेट नहीं होती हैं. किसी ऑब्जेक्ट स्टोर को देखते समय, उसका डेटा रीफ़्रेश करने के लिए रीफ़्रेश करें
पर क्लिक करें या डेटाबेस देखें. इसके बाद, सारा डेटा रीफ़्रेश करने के लिए, डेटाबेस रीफ़्रेश करें पर क्लिक करें.
छठा डायग्राम. डेटाबेस देखना
IndexedDB डेटा में बदलाव करें
ऐप्लिकेशन पैनल से, IndexedDB कुंजियों और वैल्यू में बदलाव नहीं किया जा सकता. DevTools पेज की जानकारी का ऐक्सेस है. हालांकि, DevTools में ऐसा JavaScript कोड चलाया जा सकता है जो IndexedDB डेटा में बदलाव करता हो.
स्निपेट वाले IndexedDB डेटा में बदलाव करें
स्निपेट, DevTools में JavaScript कोड के ब्लॉक को स्टोर करने और चलाने का एक तरीका है. जब कोई स्निपेट चलाया जाता है, तो नतीजे को कंसोल में लॉग किया जाता है. आप IndexedDB डेटाबेस में बदलाव करने वाले JavaScript कोड को चलाने के लिए स्निपेट का इस्तेमाल कर सकते हैं.
सातवां डायग्राम. IndexedDB से इंटरैक्ट करने के लिए स्निपेट का इस्तेमाल करना
IndexedDB डेटा मिटाएं
IndexedDB की-वैल्यू पेयर को मिटाना
- IndexedDB ऑब्जेक्ट स्टोर देखें.
उस की-वैल्यू पेयर पर क्लिक करें जिसे आपको मिटाना है. DevTools इसे नीले रंग से हाइलाइट करके बताता है कि इसे चुना गया है.
आठवां इमेज. की-वैल्यू पेयर को मिटाने के लिए उसे चुनना
मिटाएं बटन दबाएं या चुने गए को मिटाएं
पर क्लिक करें.
आकृति 9. की-वैल्यू पेयर को मिटाने के बाद, ऑब्जेक्ट स्टोर कैसा दिखता है
किसी ऑब्जेक्ट स्टोर में मौजूद सभी की-वैल्यू पेयर मिटाना
IndexedDB ऑब्जेक्ट स्टोर देखें.
आकृति 10. ऑब्जेक्ट स्टोर देखना
ऑब्जेक्ट स्टोर मिटाएं पर क्लिक करें
.
IndexedDB डेटाबेस को मिटाना
- वह IndexedDB डेटाबेस देखें जिसे आपको मिटाना है.
डेटाबेस मिटाएं पर क्लिक करें.
इमेज 11. डेटाबेस मिटाएं बटन
सभी IndexedDB स्टोरेज मिटाएं
- डिवाइस का स्टोरेज खाली करें पैनल खोलें.
- पक्का करें कि IndexedDB चेकबॉक्स चालू है.
साइट डेटा मिटाएं पर क्लिक करें.
आकर्षक 12. स्टोरेज खाली करें पैनल