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