वेब ऐप्स में क्लाइंट-साइड स्टोरेज का उपयोग करने पर एक ट्यूटोरियल

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

IndexedDB क्या है?

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

IndexedDB का उपयोग क्यों करें?

• ऑफ़लाइन क्षमताएं: प्रगतिशील वेब ऐप्स (पीडब्ल्यूए) और ऑफ़लाइन-प्रथम अनुप्रयोगों के लिए आदर्श।
• भंडारण क्षमता: IndexedDB लोकलस्टोरेज (जो लगभग 5-10एमबी तक सीमित है) की तुलना में कहीं अधिक डेटा संग्रहीत कर सकता है।
• लचीलापन: जटिल वस्तुओं जैसे सरणियों, वस्तुओं और यहां तक ​​कि ब्लॉब्स को संग्रहीत करें।
• एसिंक्रोनस: ऑपरेशन यूआई थ्रेड को ब्लॉक नहीं करते हैं, जिसका अर्थ है कि आपका ऐप उत्तरदायी रहता है।

आरंभ करना: IndexedDB की स्थापना

आइए IndexedDB के साथ काम करने के मुख्य चरणों के बारे में जानें। हम कवर करेंगे:

• डेटाबेस बनाना या खोलना
• ऑब्जेक्ट स्टोर (टेबल) बनाना
• डेटा जोड़ना
• डेटा पढ़ना
• डेटा अपडेट किया जा रहा है
• डेटा हटाना

चरण 1: डेटाबेस खोलना

IndexedDB के साथ इंटरैक्ट करने के लिए, आपको सबसे पहले डेटाबेस से एक कनेक्शन खोलना होगा। यदि डेटाबेस मौजूद नहीं है, तो इसे बनाया जाएगा।

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

यहां क्या हो रहा है:

• IndexedDB.open डेटाबेस खोलता है या बनाता है।
• डेटाबेस खोलते समय onerror किसी भी त्रुटि को संभालता है।
• जब डेटाबेस कनेक्शन सफलतापूर्वक खोला जाता है तो onsuccess ट्रिगर हो जाता है।
• onupgradeneeded को तब सक्रिय किया जाता है जब डेटाबेस को अपग्रेड करने की आवश्यकता होती है (उदाहरण के लिए, यदि यह पहली बार डेटाबेस खोल रहा है या यदि संस्करण बदलता है)। यह वह जगह है जहां आप अपने ऑब्जेक्ट स्टोर्स को परिभाषित करते हैं (उन्हें SQL में तालिकाओं के रूप में सोचें)।

चरण 2: IndexedDB में डेटा जोड़ना

अब जब हमारे पास अपना डेटाबेस और ऑब्जेक्ट स्टोर सेट अप हो गया है, तो आइए इसमें कुछ डेटा जोड़ें।

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

यहां क्या हो रहा है:

• हम संशोधनों की अनुमति देने के लिए 'रीडराइट' एक्सेस के साथ एक लेनदेन बनाते हैं।
• ऐड() विधि का उपयोग ऑब्जेक्ट स्टोर में डेटा डालने के लिए किया जाता है।
• हम यह पुष्टि करने के लिए सफलता और त्रुटि घटनाओं को सुनते हैं कि डेटा सफलतापूर्वक जोड़ा गया था या नहीं।

चरण 3: IndexedDB से डेटा पढ़ना

IndexedDB से डेटा पढ़ना भी आसान है। आइए get() विधि का उपयोग करके उस ग्राहक को पुनः प्राप्त करें जिसे हमने अभी जोड़ा है।

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

चरण 4: IndexedDB में डेटा अपडेट करना

मौजूदा रिकॉर्ड को अपडेट करने के लिए, हम पुट() विधि का उपयोग कर सकते हैं, जो ऐड() के समान काम करता है लेकिन यदि कुंजी पहले से मौजूद है तो रिकॉर्ड को बदल देता है।

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

चरण 5: IndexedDB से डेटा हटाना

अंत में, किसी रिकॉर्ड को हटाने के लिए, डिलीट() विधि का उपयोग करें।

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

निष्कर्ष

IndexedDB क्लाइंट-साइड डेटा स्टोरेज को संभालने के लिए एक मजबूत समाधान है, खासकर ऑफलाइन-फर्स्ट वेब ऐप्स में। इस गाइड का पालन करके, आपने सीखा कि कैसे:

• डेटाबेस खोलें और बनाएं
• ऑब्जेक्ट स्टोर बनाएं
• डेटा जोड़ें, पढ़ें, अपडेट करें और हटाएं

IndexedDB के साथ, आप अधिक लचीले वेब एप्लिकेशन बना सकते हैं जो स्थानीय रूप से डेटा संग्रहीत करते हैं और इंटरनेट कनेक्शन के बिना भी काम करते हैं।

सन्दर्भ:

1. एमडीएन वेब डॉक्स - IndexedDB एपीआई
   
   IndexedDB कैसे काम करता है, इसके API तरीके और उपयोग के मामलों पर एक व्यापक मार्गदर्शिका।
   
   एमडीएन इंडेक्सेडडीबी गाइड

2. Google डेवलपर्स - IndexedDB
   
   ऑफ़लाइन-सक्षम वेब ऐप्स बनाने के लिए IndexedDB की सर्वोत्तम प्रथाओं और उपयोग को कवर करने वाला एक विस्तृत लेख।
   
   Google डेवलपर्स - IndexedDB

3. W3C अनुक्रमित डेटाबेस एपीआई
   
   W3C का आधिकारिक विनिर्देश IndexedDB के तकनीकी कार्यान्वयन और संरचना को रेखांकित करता है।
   
   W3C IndexedDB स्पेक

यदि आप इस ट्यूटोरियल के अलावा IndexedDB के बारे में और अधिक जानना चाहते हैं तो ये संसाधन अतिरिक्त गहराई और संदर्भ प्रदान करेंगे!

हैप्पी कोडिंग!