खाना पकाने IndexedDB

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

IndexedDB क्या है

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

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

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

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

चलिए शुरू करते हैं

IE> 9, फ़ायरफ़ॉक्स> 15 और क्रोम> 23 उपसर्गों के बिना काम कर रहे समर्थन, लेकिन फिर भी सभी विकल्पों की जांच करना बेहतर है:

var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; 

डेटाबेस कनेक्शन

डेटाबेस के साथ काम शुरू करने के अनुरोध के साथ शुरू होता है:

 var request = indexedDB.open("myBase", 1); 

खुली विधि एक IDBOpenDBRequest ऑब्जेक्ट लौटाती है, जिसमें हम तीन ईवेंट हैंडलर्स में रुचि रखते हैं:

• आततायी ;
• onSuccess;
• onupgradeneeded ।

अगर कोई त्रुटि होती है और मानकों में त्रुटि वस्तु प्राप्त होगी तो ऑनरोर को उठाया जाएगा।

यदि सब कुछ ठीक हो गया तो असफल कहा जाएगा, लेकिन विधि को एक पैरामीटर के रूप में एक खुले डेटाबेस का उदाहरण नहीं मिलता है। एक खुला डेटाबेस अनुरोध वस्तु से सुलभ है: request.result ।

अब तक, सब कुछ पहले जैसा था, लेकिन अब मतभेद शुरू हो गए हैं। खुली विधि का दूसरा तर्क डेटाबेस का संस्करण है। एक संस्करण केवल एक प्राकृतिक संख्या हो सकती है। यदि आप भिन्नात्मक पास करते हैं, तो इसे निकटतम पूरे के लिए गोल किया जाएगा। यदि निर्दिष्ट संस्करण के साथ कोई डेटाबेस नहीं है, तो onupgradeneeded को बुलाया जाएगा, जिसमें आप पुराने संस्करण मौजूद होने पर डेटाबेस को संशोधित कर सकते हैं या डेटाबेस बना सकते हैं यदि यह बिल्कुल मौजूद नहीं है।

इस प्रकार, डेटाबेस से जुड़ने का सार्वभौमिक कार्य इस तरह दिख सकता है:

 function connectDB(f){ var request = indexedDB.open("myBase", 1); request.onerror = function(err){ console.log(err); }; request.onsuccess = function(){ //          f(request.result); } request.onupgradeneeded = function(e){ //     ,    . e.currentTarget.result.createObjectStore("myObjectStore", { keyPath: "key" }); connectDB(f); } } 

जहाँ f वह कार्य है जिसके लिए खुला डेटाबेस पास किया जाएगा।

डेटाबेस संरचना

IndexedDB तालिकाओं पर नहीं, बल्कि ऑब्जेक्ट स्टोर्स पर संचालित होता है: ObjectStore । ObjectStore बनाते समय, आप इसका नाम और पैरामीटर निर्दिष्ट कर सकते हैं: कुंजी फ़ील्ड का नाम (सेटिंग्स ऑब्जेक्ट की स्ट्रिंग प्रॉपर्टी: keyPath) और कुंजी की ऑटो-जनरेशन (सेटिंग्स ऑब्जेक्ट की बूलियन संपत्ति: autoIncrement)।

मुख्य क्षेत्र के बारे में, 4 व्यवहार रणनीतियाँ हैं:

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

विभिन्न प्रकार के रिकॉर्ड के लिए, विभिन्न विकल्प उपयुक्त हैं। उदाहरण के लिए, यदि आप आदिमों को संग्रहीत करना चाहते हैं, तो उनके लिए एक महत्वपूर्ण क्षेत्र उत्पन्न करना बेहतर है। मैं आमतौर पर वस्तुओं को संग्रहीत करता हूं और अपने प्रमुख क्षेत्र का उपयोग करता हूं।

आप CreateObjectStore विधि का उपयोग करके एक ObjectStore बना सकते हैं। ObjectStore बनाते समय, आप इसका नाम और पैरामीटर निर्दिष्ट कर सकते हैं, उदाहरण के लिए, एक प्रमुख फ़ील्ड। एक डेटाबेस इंडेक्स createIndex विधि का उपयोग करके बनाया जा सकता है। एक इंडेक्स बनाते समय, आप इसका नाम, उस फ़ील्ड को निर्दिष्ट कर सकते हैं जिसके द्वारा इसे बनाया जाना चाहिए, और पैरामीटर, उदाहरण के लिए, कुंजी की विशिष्टता:

 objectStore.createIndex("name", "name", { unique: false }); 

नोट्स के साथ काम करें

जैसा कि परिचय में उल्लेख किया गया है, IndexedDB में रिकॉर्ड के साथ कोई भी संचालन लेनदेन के हिस्से के रूप में होता है। एक लेनदेन लेनदेन विधि द्वारा खोला जाता है। विधि में, आपको यह निर्दिष्ट करने की आवश्यकता है कि आपको कौन सी ऑब्जेक्टस्टोर की आवश्यकता है और एक्सेस मोड: पढ़ना, पढ़ना और लिखना, संस्करण बदलना। संस्करण परिवर्तन मोड अनिवार्य रूप से onupgradeneeded विधि के समान है।

मैंने विशिष्ट संख्याएँ नहीं मापीं, लेकिन मुझे लगता है कि प्रदर्शन के नज़रिए से यह सावधानी से लेन-देन के मापदंडों को निर्धारित करने के लिए बेहतर है: केवल वही ऑब्जेक्ट खोलें जो आपको चाहिए और जब आपको पढ़ने की आवश्यकता हो तो रिकॉर्ड न मांगें।

 db.transaction(["myObjectStore"], "readonly"); 

अब जब हमारे पास एक खुला लेन-देन है, तो हम अपना ऑब्जेक्टस्टोर प्राप्त कर सकते हैं, जिसमें रिकॉर्ड के साथ काम करने के निम्नलिखित तरीके हैं:

• जोड़ - एक सख्ती से नया रिकॉर्ड जोड़ता है, यदि आप किसी मौजूदा कुंजी के साथ रिकॉर्ड जोड़ने की कोशिश करते हैं, तो हमें एक त्रुटि मिलती है;
• डाल - ओवरराइट या निर्दिष्ट कुंजी के लिए एक नया रिकॉर्ड बनाता है;
• मिल - कुंजी द्वारा एक रिकॉर्ड देता है;
• हटाएं - निर्दिष्ट कुंजी के लिए रिकॉर्ड हटाता है।

कर्सर

यदि आप उस कुंजी को जानते हैं, जिसके द्वारा आप डेटा प्राप्त करना चाहते हैं, तो उपयोग करने के लिए विधि प्राप्त करना सुविधाजनक है। यदि आप ObjectStore में सभी प्रविष्टियों के माध्यम से जाना चाहते हैं, तो आप कर्सर का उपयोग कर सकते हैं:

 var customers = []; objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { customers.push(cursor.value); cursor.continue(); } else { alert("Got all customers: " + customers); } }; 

लेकिन मोज़िला के लोग, मेरे जैसे, ने सभी रिकॉर्डों को असहज करने का यह तरीका पाया और उन्होंने एक ऐसा तरीका बनाया जो तुरंत ObjectStore की सभी सामग्री को लौटा देता है: mozGetAll । मुझे उम्मीद है कि भविष्य में अन्य ब्राउज़र इसे लागू करेंगे।

सूची

यदि आप सूचकांक का उपयोग करके मूल्य प्राप्त करना चाहते हैं, तो सब कुछ भी काफी सरल है:

 var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) { alert("Donna's SSN is " + event.target.result.ssn); }; 

प्रतिबंध

आकार

आकार पर लगभग कोई प्रतिबंध नहीं हैं। फ़ायरफ़ॉक्स केवल हार्ड ड्राइव के आकार को सीमित करता है, लेकिन इस शर्त पर कि प्रत्येक अतिरिक्त 50 मेगाबाइट उपयोगकर्ता की पुष्टि के लिए आवश्यक है। क्रोम उन सभी वेब पेजों के डेटाबेस के तहत आधे हार्ड ड्राइव पर कब्जा कर सकता है, जबकि प्रत्येक डेटाबेस को उस आधे के 20% तक सीमित करता है।

ब्राउज़र का समर्थन

यह सफारी और मोबाइल ओपेरा को छोड़कर सभी नए ब्राउज़रों द्वारा समर्थित है, जो मेरी राय में, कोई फर्क नहीं पड़ता।

उदाहरण

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

 var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction, baseName = "filesBase", storeName = "filesStore"; function logerr(err){ console.log(err); } function connectDB(f){ var request = indexedDB.open(baseName, 1); request.onerror = logerr; request.onsuccess = function(){ f(request.result); } request.onupgradeneeded = function(e){ e.currentTarget.result.createObjectStore(storeName, { keyPath: "path" }); connectDB(f); } } function getFile(file, f){ connectDB(function(db){ var request = db.transaction([storeName], "readonly").objectStore(storeName).get(file); request.onerror = logerr; request.onsuccess = function(){ f(request.result ? request.result : -1); } }); } function getStorage(f){ connectDB(function(db){ var rows = [], store = db.transaction([storeName], "readonly").objectStore(storeName); if(store.mozGetAll) store.mozGetAll().onsuccess = function(e){ f(e.target.result); }; else store.openCursor().onsuccess = function(e) { var cursor = e.target.result; if(cursor){ rows.push(cursor.value); cursor.continue(); } else { f(rows); } }; }); } function setFile(file){ connectDB(function(db){ var request = db.transaction([storeName], "readwrite").objectStore(storeName).put(file); request.onerror = logerr; request.onsuccess = function(){ return request.result; } }); } function delFile(file){ connectDB(function(db){ var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(file); request.onerror = logerr; request.onsuccess = function(){ console.log("File delete from DB:", file); } }); } 

निष्कर्ष

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

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

MDN पर अधिक जानकारी।