कई वेब ऐप्स को उपयोगकर्ता विवरण या वरीयताओं को स्टोर करने के लिए डेटाबेस का उपयोग करने की आवश्यकता होती है। लेकिन क्या आप जानते हैं कि हर आधुनिक वेब ब्राउजर में एक बिल्ट-इन डेटाबेस होता है।

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

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

अपना डेटाबेस सेट करना

डेटाबेस बनाने के लिए, आपको IndexedDB's का उपयोग करके एक खुला अनुरोध बनाना होगा खुला तरीका। खुला विधि एक देता है आईडीबीओपनडीबीअनुरोध वस्तु। यह वस्तु तक पहुँच प्रदान करती है सफलता, गलती, और उन्नयन की जरूरत हैउत्सर्जित घटनाएँ ओपन ऑपरेशन से

खुला विधि दो तर्क लेती है: एक नाम और एक वैकल्पिक संस्करण संख्या। नाम तर्क आपके डेटाबेस के नाम का प्रतिनिधित्व करता है। संस्करण संख्या उस डेटाबेस के संस्करण को निर्दिष्ट करती है जिसके साथ आपका एप्लिकेशन काम करने की अपेक्षा करता है। डिफ़ॉल्ट मान शून्य है।

instagram viewer

यहां एक खुला अनुरोध बनाने का तरीका बताया गया है:

कॉन्स्ट openRequest = indexedDB.open ("यूजर्सडीबी", 1);

खुला अनुरोध बनाने के बाद, आपको सुनने की जरूरत है और घटनाओं को संभालो लौटी हुई वस्तु पर।

सफलता घटना तब होती है जब आप सफलतापूर्वक डेटाबेस बनाते हैं। एक बार उत्सर्जित होने के बाद, आप अपने डेटाबेस ऑब्जेक्ट तक पहुँच प्राप्त करते हैं घटना.लक्ष्य.परिणाम:

openRequest.onsuccess = समारोह (आयोजन) {
कॉन्स्ट डीबी = घटना.लक्ष्य.परिणाम;
सांत्वना देना।लकड़ी का लट्ठा("डेटाबेस बनाया गया", डीबी);
};

ऊपर दिया गया उदाहरण डेटाबेस ऑब्जेक्ट को लॉग करके एक सक्सेस इवेंट को हैंडल करता है।

गलती ईवेंट तब होता है जब डेटाबेस बनाते समय IndexedDB में कोई समस्या आती है। आप कंसोल में त्रुटि दर्ज करके या अन्य का उपयोग करके इसे संभाल सकते हैं त्रुटि से निपटने के तरीके:

openRequest.onerror = समारोह (आयोजन) {
// ...
};

उन्नयन की जरूरत है घटना तब होती है जब आप पहली बार डेटाबेस बनाते हैं या जब आप इसका संस्करण अपडेट करते हैं। यह केवल एक बार सक्रिय होता है, जिससे यह ऑब्जेक्ट स्टोर बनाने के लिए आदर्श स्थान बन जाता है।

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

ऑब्जेक्ट स्टोर सर्वर-साइड रिलेशनल डेटाबेस में टेबल के समान है। आप की-वैल्यू पेयर को स्टोर करने के लिए ऑब्जेक्ट स्टोर का उपयोग कर सकते हैं।

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

आप का उपयोग करके ऑब्जेक्ट स्टोर बना सकते हैं createObjectStore विधि, जिसे आप अपने डेटाबेस के संदर्भ में एक्सेस कर सकते हैं। यह विधि ऑब्जेक्ट स्टोर का नाम और कॉन्फ़िगरेशन ऑब्जेक्ट को तर्क के रूप में लेती है।

कॉन्फ़िगरेशन ऑब्जेक्ट में, आपको प्राथमिक कुंजी को परिभाषित करना होगा। आप एक कुंजी पथ को परिभाषित करके एक प्राथमिक कुंजी को परिभाषित कर सकते हैं, जो एक ऐसी संपत्ति है जो हमेशा मौजूद रहती है और इसमें एक अद्वितीय मूल्य होता है। वैकल्पिक रूप से, आप सेट करके एक प्रमुख जनरेटर का उपयोग कर सकते हैं मुख्यपथ संपत्ति "पहचान" और यह स्वत: वेतनवृद्धि संपत्ति को सत्य आपके कॉन्फ़िगरेशन ऑब्जेक्ट में।

उदाहरण के लिए:

openRequest.onupgradneeded = समारोह (आयोजन) {
कॉन्स्ट डीबी = घटना.लक्ष्य.परिणाम;
// ऑब्जेक्ट स्टोर बनाएं
कॉन्स्ट userObjectStore = db.createObjectStore ("यूजरस्टोर", {
 मुख्यपथ: "पहचान",
 स्वत: वेतनवृद्धि: सत्य,
 });
}

यह उदाहरण आपके डेटाबेस में "यूजरस्टोर" नाम का एक ऑब्जेक्ट स्टोर बनाता है और इसकी प्राथमिक कुंजी को ऑटो-इन्क्रीमेंटिंग आईडी पर सेट करता है।

इंडेक्स को परिभाषित करना

इंडेक्सड डीबी में, एक इंडेक्स डेटा को अधिक कुशलता से व्यवस्थित और पुनर्प्राप्त करने का एक तरीका है। यह आपको ऑब्जेक्ट स्टोर को खोजने और अनुक्रमित गुणों के आधार पर सॉर्ट करने की अनुमति देता है।

ऑब्जेक्ट स्टोर पर इंडेक्स को परिभाषित करने के लिए, का उपयोग करें क्रिएटइंडेक्स () ऑब्जेक्ट स्टोर ऑब्जेक्ट की विधि। यह विधि एक इंडेक्स नाम, एक संपत्ति का नाम और कॉन्फ़िगरेशन ऑब्जेक्ट को तर्क के रूप में लेती है:

userObjectStore.createIndex ("नाम", "नाम", { अद्वितीय: असत्य });
userObjectStore.createIndex ("ईमेल", "ईमेल", { अद्वितीय: सत्य });

ऊपर यह कोड ब्लॉक दो इंडेक्स, "नाम" और "ईमेल" को परिभाषित करता है userObjectStore. "नाम" सूचकांक गैर-अद्वितीय है, जिसका अर्थ है कि कई वस्तुओं का नाम समान मान हो सकता है, जबकि "ईमेल" सूचकांक अद्वितीय है, यह सुनिश्चित करता है कि किसी भी दो वस्तुओं का ईमेल मूल्य समान नहीं हो सकता है।

आप कैसे संभाल सकते हैं इसका एक पूरा उदाहरण यहां दिया गया है उन्नयन की जरूरत है आयोजन:

openRequest.onupgradneeded = समारोह (आयोजन) {
कॉन्स्ट डीबी = घटना.लक्ष्य.परिणाम;
// ऑब्जेक्ट स्टोर बनाएं
कॉन्स्ट userObjectStore = db.createObjectStore ("यूजरस्टोर", {
 मुख्यपथ: "पहचान",
 स्वत: वेतनवृद्धि: सत्य,
 }); 
// इंडेक्स बनाएं
 userObjectStore.createIndex ("नाम", "नाम", { अद्वितीय: असत्य });
 userObjectStore.createIndex ("ईमेल", "ईमेल", { अद्वितीय: सत्य });
};

इंडेक्सड डीबी में डेटा जोड़ना

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

इंडेक्सड डीबी डेटाबेस में डेटा जोड़ने के लिए, आपको उस ऑब्जेक्ट स्टोर पर एक लेनदेन बनाना होगा जिसे आप डेटा जोड़ना चाहते हैं और फिर इसका उपयोग करें जोड़ना() डेटा जोड़ने के लिए लेन-देन पर विधि।

आप कॉल करके एक लेनदेन बना सकते हैं लेन-देन आपके डेटाबेस ऑब्जेक्ट पर विधि। यह विधि दो तर्क लेती है: आपके डेटास्टोर का नाम और लेन-देन का तरीका, जो हो सकता है केवल पढ़ने के लिए (डिफ़ॉल्ट) या पढ़ना लिखना.

फिर, कॉल करें ऑब्जेक्टस्टोर () लेन-देन पर विधि और उस ऑब्जेक्ट स्टोर का नाम पास करें जिसमें आप डेटा जोड़ना चाहते हैं। यह विधि ऑब्जेक्ट स्टोर का संदर्भ देती है।

अंत में कॉल करें जोड़ना() ऑब्जेक्ट स्टोर पर विधि और उस डेटा को पास करें जिसे आप जोड़ना चाहते हैं:

कॉन्स्ट उपयोगकर्ता डेटा जोड़ें = (उपयोगकर्ता डेटा, डीबी) => {
// एक लेनदेन खोलें
कॉन्स्ट लेन-देन = db.transaction ("यूजरस्टोर", "पढ़ना लिखना");
// ऑब्जेक्ट स्टोर में डेटा जोड़ें
कॉन्स्ट userObjectStore = लेनदेन.ऑब्जेक्टस्टोर ("यूजरस्टोर");


// UserData जोड़ने के लिए अनुरोध करें
कॉन्स्ट अनुरोध = userObjectStore.add (उपयोगकर्ता डेटा);


// एक सफल घटना को संभालें
 अनुरोध। सफलता = समारोह (आयोजन) {
//...
 };
// एक त्रुटि को संभालें
 अनुरोध.ऑनरर = समारोह (आयोजन) {
//...
 };
};

यह फ़ंक्शन ऑब्जेक्ट स्टोर "यूज़रस्टोर" के साथ एक लेन-देन बनाता है और मोड को "रीडराइट" पर सेट करता है। फिर, यह ऑब्जेक्ट स्टोर प्राप्त करता है और जोड़ता है उपयोगकर्ता का डेटा इसका उपयोग करने के लिए जोड़ना तरीका।

इंडेक्स्ड डीबी से डेटा पुनर्प्राप्त करना

इंडेक्सड डीबी डेटाबेस से डेटा पुनर्प्राप्त करने के लिए, आपको उस ऑब्जेक्ट स्टोर पर लेनदेन बनाना होगा जिससे आप डेटा पुनर्प्राप्त करना चाहते हैं और फिर इसका उपयोग करें पाना() या सब प्राप्त कर लिया() डेटा की मात्रा के आधार पर डेटा को पुनः प्राप्त करने के लिए लेन-देन की विधि जिसे आप पुनः प्राप्त करना चाहते हैं।

पाना() विधि उस वस्तु की प्राथमिक कुंजी के लिए एक मान लेती है जिसे आप पुनर्प्राप्त करना चाहते हैं और वस्तु को आपके ऑब्जेक्ट स्टोर से संबंधित कुंजी के साथ वापस कर देता है।

सब प्राप्त कर लिया() विधि ऑब्जेक्ट स्टोर में सभी डेटा लौटाती है। यह एक तर्क के रूप में एक वैकल्पिक बाधा भी लेता है और स्टोर से सभी मिलान डेटा लौटाता है।

कॉन्स्ट उपयोगकर्ता डेटा प्राप्त करें = (आईडी, डीबी) => {
कॉन्स्ट लेन-देन = db.transaction ("यूजरस्टोर", "केवल पढ़ने के लिए");
कॉन्स्ट userObjectStore = लेनदेन.ऑब्जेक्टस्टोर ("यूजरस्टोर");
// डेटा प्राप्त करने के लिए अनुरोध करें
कॉन्स्ट अनुरोध = userObjectStore.get (आईडी);


 अनुरोध। सफलता = समारोह (आयोजन) {
सांत्वना देना.लॉग (अनुरोध.परिणाम);
 };
 अनुरोध.ऑनरर = समारोह (आयोजन) {
// हैंडल एरर
 };
};

यह फ़ंक्शन ऑब्जेक्ट स्टोर "यूजरस्टोर" के साथ एक लेनदेन बनाता है और मोड को "केवल पढ़ने के लिए" सेट करता है। यह तब ऑब्जेक्ट स्टोर से मेल खाने वाली आईडी के साथ उपयोगकर्ता डेटा को पुनः प्राप्त करता है।

इंडेक्सड डीबी के साथ डेटा अपडेट करना

इंडेक्सड डीबी में डेटा अपडेट करने के लिए, आपको "रीडराइट" मोड के साथ एक लेनदेन बनाना होगा। आप जिस वस्तु का उपयोग करके अद्यतन करना चाहते हैं उसे पुनर्प्राप्त करके जारी रखें पाना() तरीका। फिर वस्तु को संशोधित करें और कॉल करें रखना() अद्यतन ऑब्जेक्ट को डेटाबेस में वापस सहेजने के लिए ऑब्जेक्ट स्टोर पर विधि।

कॉन्स्ट अद्यतन उपयोगकर्ता डेटा = (आईडी, उपयोगकर्ता डेटा, डीबी) => {
कॉन्स्ट लेन-देन = db.transaction ("यूजरस्टोर", "पढ़ना लिखना");
कॉन्स्ट userObjectStore = लेनदेन.ऑब्जेक्टस्टोर ("यूजरस्टोर");
// डेटा प्राप्त करने के लिए अनुरोध करें
कॉन्स्ट getRequest = userObjectStore.get (आईडी);


// एक सफल घटना को संभालें
 getRequest.onsuccess = समारोह (आयोजन) {
// पुराना उपयोगकर्ता डेटा प्राप्त करें
कॉन्स्ट उपयोगकर्ता = event.target.result;


// उपयोगकर्ता डेटा अपडेट करें
 उपयोगकर्ता.नाम = उपयोगकर्ताडेटा.नाम;
 user.email = userData.email;


// डेटा को अपडेट करने का अनुरोध करें
कॉन्स्ट putRequest = userObjectStore.put (उपयोगकर्ता);


 putRequest.onsuccess = समारोह (आयोजन) {
// सफलता को संभालें
 };


 putRequest.onerror = समारोह (आयोजन) {
// हैंडल एरर
 };
 };
 getRequest.onerror = समारोह (आयोजन) {
// हैंडल एरर
 };
};

यह फ़ंक्शन आपके डेटाबेस के डेटा को प्राप्त करने और अपडेट करने के लिए लेन-देन बनाता है।

इंडेक्सड डीबी से डेटा हटाना

इंडेक्सड डीबी से डेटा हटाने के लिए, आपको "रीडराइट" मोड के साथ एक लेनदेन बनाना होगा। फिर कॉल करें मिटाना() डेटाबेस से ऑब्जेक्ट को निकालने के लिए ऑब्जेक्ट स्टोर पर विधि:

कॉन्स्ट उपयोगकर्ता डेटा हटाएं = (आईडी, डीबी) => {
कॉन्स्ट लेन-देन = db.transaction ("यूजरस्टोर", "पढ़ना लिखना");
कॉन्स्ट userObjectStore = लेनदेन.ऑब्जेक्टस्टोर ("यूजरस्टोर");
// डेटा को हटाने का अनुरोध करें
कॉन्स्ट अनुरोध = userObjectStore.delete (आईडी);


 अनुरोध। सफलता = समारोह (आयोजन) {
// सफलता को संभालें
 };
 अनुरोध.ऑनरर = समारोह (आयोजन) {
// हैंडल एरर
 };
};

यह फ़ंक्शन एक लेन-देन बनाता है जो आपके ऑब्जेक्ट स्टोर से संबंधित आईडी वाले डेटा को हटा देता है।

क्या आपको इंडेक्सड डीबी या स्थानीय स्टोरेज का उपयोग करना चाहिए?

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