IndexedDB - क्लाइंट पर संरचित डेटा की बड़ी मात्रा को संग्रहीत करने के लिए मानक - साथ ही साथ WebSocket (अच्छी तरह से, शायद थोड़ा कम) की उम्मीद थी। फ़ायर्फ़ॉक्स 4 की रिलीज़ के आलोक में, मुझे यह पता लगाने के लिए समय और शक्ति मिली कि इसका उपयोग कैसे किया जाए और इंटरनेट पर चलने वाली एक एड्रेस बुक के साथ एक उदाहरण से अधिक कुछ लिखने की कोशिश की जाए (जानकारी की खोज की प्रक्रिया में, मुझे आभास था कि यह एकमात्र था उदाहरण)।

कुछ परिचयात्मक शब्द

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

पाठ में भावनाओं के विमोचन के लिए ज़रूरी गीतात्मक पचड़े होंगे। मैं लेख को विकी-शैली के लिंक के साथ छिड़कना नहीं चाहता, सभी स्रोत अंत में स्टैक्ड हैं।

हम किस पर प्रशिक्षण देंगे

ऐसा हुआ कि मैं हाल ही में चैट रूम बना रहा हूं। तो हम निम्नलिखित आवश्यकताओं के साथ एक चैट रूम का निर्माण करेंगे:

• सभी चैट संदेश स्थानीय रूप से संग्रहीत किए जाते हैं; सर्वर से हाल ही में 100 से अधिक संदेश प्राप्त नहीं हुए हैं;
• उपयोगकर्ता सेटिंग्स स्थानीय स्तर पर भी संग्रहीत हैं, हमारे मामले में, उपयोगकर्ता नाम।

चलो चलते हैं

पहला चरण यह जांचने के लिए है कि ब्राउज़र में IndexedDB के लिए समर्थन है या नहीं। यह निम्नानुसार किया जाता है:

if ("webkitIndexedDB" in window){ var idb=window.webkitIndexedDB; } else if ("mozIndexedDB" in window) { var idb=window.mozIndexedDB; } else { // ,         -    }; 

:
, . , , ( ), , , -, .


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

 var idbRequest=idb.open(dbName,dbDescription); //dbName –   , dbDescription –   () //     idbRequest.onsuccess=function (e) {…}; idbRequest.onerror=function (e) {…}; 

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

 function idbRequestError(err){ idbRequest=err.target; //  idbRequest.errorCode // webkit,   idbRequest.webkitErrorMessage; } 

इस त्रुटि को कॉल करना काफी सरल है:

• ब्राउज़र सेटिंग्स में स्थानीय डेटा को बचाने पर रोक;
• फ़ायरफ़ॉक्स संदेश के बारे में सोचें “यह साइट स्थानीय स्तर पर डेटा लिखने की कोशिश कर रही है। अनुमति दें? "

यदि कनेक्शन सफल है, तो आप जारी रख सकते हैं और जांच सकते हैं कि उपयोगकर्ता के पास सही डेटाबेस है या नहीं और क्या इसका सही संस्करण है। सफल हैंडलर संरचना:

 function idbRequestSuccess(e){ var db=e.target.result; if (db.version===''){ //   }else if (db.version!='3.14'){ //     } else { //  }; } 

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

IndexedDB में लेनदेन

W3C ड्राफ्ट चार प्रकार के लेनदेन को परिभाषित करता है: READ_ONLY, READ_WRITE, SNAPSHOT_READ और VERSION_CHANGED।


, READ_ONLY SNAPSHOT_READ, , , .

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


. W3C READ_WRITE=0, READ_ONLY=1, SNAPSHOT_READ=2, VERSION_CHANGE=3. “webkitIDBTransaction.READ_ONLY” , , . , VERSION_CHANGE 2, . , FireFox READ_ONLY=0, READ_WRITE=1 .


डेटा ऑब्जेक्ट बनाना

जैसा कि पहले ही उल्लेख किया गया है, आप केवल VERSION_CHANGE लेनदेन से डेटा ऑब्जेक्ट में हेरफेर कर सकते हैं। हम इसे एक सफल संस्करण परिवर्तन के हैंडलर से जोड़ सकते हैं।

 var setVersion=db.setVersion('3.14'); setVersion.onsuccess=function (e) { var db=e.target.transaction.db; //    }; 

डेटा ऑब्जेक्ट्स के साथ क्या किया जा सकता है:
बनाएँ - createObjectStore ()
हटाएं - deleteObjectStore ()
लेन-देन निर्दिष्ट करें - लेन-देन ()

हम निष्कासन से निपटेंगे

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

 for (var i=0; i<db.objectStoreNames.length; i++){ db.deleteObjectStore(db.objectStoreNames.length[i]); }; 

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

ऑब्जेक्ट बनाएँ

उदाहरण में, पता पुस्तिका के साथ, केवल एक डेटाबेस ऑब्जेक्ट बनाया गया था। लेकिन, जब मैंने दो ऑब्जेक्ट बनाने का फैसला किया, तो फ़ायरफ़ॉक्स ने मुझे NON_TRANSIENT_ERR, जो मोटे तौर पर मतलब है: "आप गलत काम और गलत लेनदेन कर रहे हैं" विषय पर मुझे घेरना शुरू कर दिया।

प्रारंभ में, डिजाइन इस प्रकार था, और क्रोम में ठीक काम किया:

 var setVersion=db.setVersion(dbVersion); setVersion.onsuccess=idbCreateStore; function idbCreateStore(e){ //   ,   VERSION_CHANGE  var db=e.target.transaction.db; if (!db.objectStoreNames.contains('chat')){ //      soChat=db.createObjectStore('chat', 'id'); soChat.createIndex('itime','time'); }; if (!db.objectStoreNames.contains('iam')){ //     soIam=db.createObjectStore('iam'); }; } 

कई घंटों के प्रयोग के बाद, FireLis के लिए एक हैक बनाया गया, जो क्रोम में भी काम करता है:

 var setVersion=db.setVersion('4'); setVersion.onsuccess=idbCreateStore; function idbCreateStore(e){ //   ,   VERSION_CHANGE  var db=e.target.transaction.db; if (!db.objectStoreNames.contains('chat')){ //      co=db.createObjectStore('chat','id'); setVersion=db.setVersion('42') setVersion.onsuccess=idbCreateStore; return; }; if (!db.objectStoreNames.contains('iam')){ //     co=db.createObjectStore('iam'); }; } 

जैसा कि आपने शायद देखा है, ऑब्जेक्ट बनाने से पहले, यह देखने के लिए एक जाँच चल रही है कि क्या डेटाबेस में पहले से ही ऐसा कोई ऑब्जेक्ट है। यह वस्तुओं को हटाने के साथ गड़बड़ नहीं करने के लिए किया जाता है। यदि आप डेटाबेस में पहले से मौजूद ऑब्जेक्ट बनाने का प्रयास करते हैं, तो एक त्रुटि सामने आएगी।

ऑब्जेक्ट बनाने के लिए वैकल्पिक तर्क: कुंजी नाम और ऑटो-इंसिनेंस फ्लैग (ब्राउज़र द्वारा अनदेखा)।

इसके अलावा, इंडेक्स का निर्माण कोड से गायब हो गया: OgneLis ने एक संस्करण परिवर्तन लेनदेन में अनुक्रमित के निर्माण के लिए दर्दनाक प्रतिक्रिया व्यक्त की।

इस बिंदु पर, डेटाबेस बनता है। ऐसा लगता है कि हम जारी रख सकते हैं। लेकिन ऐसा है नहीं। सभी कॉल अतुल्यकालिक रूप से किए जाते हैं, इसलिए, यह स्पष्ट रूप से नहीं कहा जा सकता है कि सभी ऑब्जेक्ट बनाए गए थे। फिर से, विनिर्देश के अनुसार, IDObjectStore ऑब्जेक्ट द्वारा createObjectStore () विधि में IDBRequest गुण होना चाहिए, जो कि असफल हैंडलर के साथ लटका दिया जा सकता है। लेकिन वस्तु में समान गुण नहीं है। इसलिए, मुख्य कार्य चक्र शुरू करने से पहले, आपको तब तक इंतजार करना होगा जब तक कि डेटाबेस ऑब्जेक्ट्स का निर्माण पूरा नहीं हो जाता है, जो कि निम्न नहीं किया जाता है।

 var idbObjectsWait=true; while (idbObjectsWait){ idbObjectsWait=!(db.objectStoreNames.contains('chat') && db.objectStoreNames.contains('iam')); }; 

अंत में, डेटाबेस बनाया गया है, और आप इसमें लिखना शुरू कर सकते हैं और इससे पढ़ सकते हैं कि आपने क्या लिखा है।

अभिलेख

डेटा लिखने के दो तरीके हैं (और केवल एक लिखित लेनदेन से): जोड़ें और डालें। अंतर निम्नानुसार हैं: यदि आप एक कुंजी जोड़ते हैं जो पहले से ही जोड़ने के लिए ऑब्जेक्ट में मौजूद है, तो मूल्य नहीं लिखा जाएगा; डाल - डेटा की जगह। ऑपरेशन फिर से अतुल्यकालिक हैं।

 var t=idb.transaction(['iam'], idbConst.WRITE); var s=t.objectStore('iam'); s.put({'name':$('#name').val()},1); 

पढ़ना

       .          IDBKeyRange,      ,      . ..       :  .  ,   : var t=idb.transaction(['chat'],idbConst.READ); var s=t.objectStore('chat'); var r=s.openCursor(); r.onsuccess=function (e) { var idbEntry=e.target.result; if (idbEntry){ //,       idbEntry.continue(); } else { //  }; }; 

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

निष्कर्ष

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

विषय पर क्या देखना है

Mikewest ।
developer.mozilla.org/en/IndexedDB - मोज़िला का एक विकास दस्तावेज़।
www.w3.org/TR/IndexedDB - W3C विशिष्टता।
www.netroxsc.ru/pub/chateg - Chrome उदाहरण Chrome 11 और 12, और प्रोजेक्ट स्रोतों में परीक्षण किया गया

UPD 2014-04-09 । IndexDB लेख अपडेट किया गया: IndexedDB तैयार करना