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

Kayce Basques

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

IndexedDB डेटा देखना

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

   

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

   • notes - https://mdn.github.io एक डेटाबेस को दिखाता है, जहां notes डेटाबेस का नाम है और https://mdn.github.io वह ऑरिजिन है जो डेटाबेस को ऐक्सेस कर सकता है.
   • notes एक ऑब्जेक्ट स्टोर है.
   • title और body, इंडेक्स हैं.

1. किसी डेटाबेस पर क्लिक करके, उसके सोर्स और वर्शन नंबर की जानकारी देखें.

   

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

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

   

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

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

3. वैल्यू कॉलम में मौजूद किसी सेल पर क्लिक करके, उस वैल्यू को बड़ा करें.

   

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

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

   

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

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

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

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

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

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

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

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

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

IndexedDB डेटा मिटाना

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

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

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

   

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

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

   

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

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

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

   

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

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

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

1. वह IndexedDB डेटाबेस देखें जिसे आपको मिटाना है.

2. डेटाबेस मिटाएं पर क्लिक करें.

   

   ग्यारहवीं इमेज. डेटाबेस मिटाएं बटन

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

1. स्टोरेज खाली करें पैनल खोलें.
2. पक्का करें कि IndexedDB चेकबॉक्स पर सही का निशान लगा हो.

3. साइट का डेटा मिटाएं पर क्लिक करें.

   

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