Advertisement
  1. Code
  2. Web Development

indexedDB के साथ काम करना - भाग 3

Scroll to top
Read Time: 12 mins

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

मेरी indexedDB सीरीज के अंतिम भाग में आपका स्वागत है। जब मैंने इस सीरीज को शुरू किया, तो मेरा इरादा ऐसी तकनीक को समझाना था जो हमेशा काम नहीं करता ... दोस्ताना तरीके से काम करना। असल में, जब मैंने पहली बार indexedDB के साथ काम करने की कोशिश की, तो पिछले साल, मेरी शुरूआती प्रतिक्रिया कुछ हद तक नकारात्मक थी ("कुछ हद तक नकारात्मक" ब्रह्मांड की तरह "कुछ हद तक पुराना" है।)। यह एक लंबी यात्रा रही है, लेकिन अंत में मैं indexedDB के साथ कुछ हद तक कम्फर्टेबल महसूस कर रहा हूं और मैं इसका सम्मान करता हूं। यह अभी भी एक ऐसी तकनीक है जिसका उपयोग हर जगह नहीं किया जा सकता है (यह दुख की बात है कि IOS7 में जुड़ने से अभी भी मिस है), लेकिन मुझे सच में विश्वास है कि यह एक तकनीकी लोग सीख सकते हैं और आज इसका उपयोग कर सकते हैं।

इस अंतिम आर्टिकल में, हम कुछ अतिरिक्त कॉन्सेप्ट्स को प्रदर्शित करने जा रहे हैं जो हमने पिछले आर्टिकल में बनाए गए "full" डेमो के ऊपर निर्मित किया हैं। स्पष्ट होने के लिए, आपको सीरीज के साथ चलना चाहिए या इस एंट्री को फॉलो करना मुश्किल होगा, इसलिए आपको भाग एक को भी देखना चाहिए।


डेटा को काउंट करना

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

objectStore पर चलने वाले count() मेथड, डेटा के काउंट को रीटर्न करेगा। बाकी सब कुछ की तरह हमने जो यह किया है यह असिंक्रोनोस (asynchronous) होगा, लेकिन आप कोड को एक कॉल तक सरल बना सकते हैं। हमारे नोट डेटाबेस के लिए, मैंने doCount() नामक एक फ़ंक्शन लिखा है जो यह करता है:

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

Count ExampleCount ExampleCount Example

आखिरी चीज जो मुझे करने की ज़रूरत है वह बस doCount में कॉल को जोड़ना जब एप्लिकेशन शुरू होती है और ऑपरेशन को जोड़ने या हटाने के बाद। डेटाबेस खोलने के लिए success हैंडलर से यहां एक उदाहरण दिया गया है।

आप ज़िप में पूरा उदाहरण पा सकते हैं जिसे आपने fulldemo2 के रूप में डाउनलोड किया है। (एक FYI के रूप में, fulldemo1 एप्लीकेशन है क्योंकि यह पिछले आर्टिकल के अंत में थी।)


जैसे ही आप टाइप करते हैं इसे फ़िल्टर करें

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

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

इसके बाद, मैंने UI में एक साधारण फॉर्म फ़ील्ड को जोड़ा:

Filter UIFilter UIFilter UI

फिर मैंने फ़ील्ड में एक "keyup" हैंडलर जोड़ा ताकि मैं टाइप करते ही अपडेट को देख सकूं।

ध्यान दें कि मैं displayNotes को कैसे कॉल कर रहा हूं। यह वही फंक्शन है जिसका उपयोग मैंने सब कुछ प्रदर्शित करने से पहले किया था। मैं इसे "get everything" एक्शन के साथ-साथ "get filtered" टाइप के एक्शन दोनों का सपोर्ट करने के लिए अपडेट करने जा रहा हूं। आइए इसे देखें।

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

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

हालांकि यह काम करता है, इसमें एक छोटी सी समस्या है। "Saints Rule" नामक एक नोट की कल्पना करो। (क्योंकि वे करते हैं। बस कह रहे हैं।) शायद आप "saints" टाइप करके इसे खोजने की कोशिश करेंगे। यदि आप ऐसा करते हैं, तो फ़िल्टर काम नहीं करेगा क्योंकि यह केस सेंसिटिव है। हम इससे कैसे निपट सकते हैं?

एक तरीका यह है कि हमारे टाइटल की एक कॉपी को लोअरकेस में स्टोर करना है। यह करना अपेक्षाकृत आसान है। सबसे पहले, मैंने titlelc नामक एक नई प्रॉपर्टी का उपयोग करने के लिए इंडेक्स को मॉडिफाई किया।

फिर मैंने उस कोड को मॉडिफाई किया जो फ़ील्ड की एक कॉपी बनाने के लिए नोट्स को स्टोर करता है:

आखिरकार, मैंने सर्च को केवल यूजर इनपुट को लोअरकेस करने के लिए मॉडिफाई किया। इस तरह यदि आप "Saints" में एंटर करते हैं तो यह केवल "saints" में एंटर करने के साथ-साथ काम करेगा।

बस। आप इस वर्जन को fulldemo4 के रूप में पा सकते हैं।


ऐरे प्रॉपर्टीज के साथ काम करना

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

सबसे पहले, मैंने एक नया इनपुट फ़ील्ड रखने के लिए अपने नोट फॉर्म को मॉडिफाई किया। यह यूजर को कॉमा से अलग टैग एंटर करने की अनुमति देगा:

Tag UITag UITag UI

मैं इसे आसानी से अपना कोड अपडेट करके सेव कर सकता हूं जो नोट क्रिएट करने/अपडेट करने को संभालता है।

ध्यान दें कि मैं वैल्यू को खाली ऐरे के रूप में डिफ़ॉल्ट कर रहा हूं। यदि आप कुछ टाइप करते हैं तो मैं केवल इसे पॉप्युलेट करता हूं। इसे सेव करना उतना सरल है जितना उस ऑब्जेक्ट में जोड़ना जो हम indexedDB को पास करते हैं:

बस। यदि आप कुछ नोट्स लिखते हैं और क्रोम के Resources टैब खोलते हैं, तो आप वास्तव में स्टोर किये डेटा को देख सकते हैं।

Chrome DevTools and the Resource ViewChrome DevTools and the Resource ViewChrome DevTools and the Resource View

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

यह फ़ंक्शन (हमारे एप्लिकेशन में एक नया जोड़ा) टेबल click ईवेंट पर औपचारिक रूप से बाध्य नोट डिस्प्ले कोड को संभालता है। मुझे कोड का एक और अब्स्ट्रक्ट वर्जन चाहिए ताकि यह उस उद्देश्य को पूरा कर सके। अधिकांश भाग के लिए यह वही है, लेकिन टैग प्रॉपर्टी की लंबाई की जांच करने के लिए लॉजिक को नोट करें। यदि ऐरे खाली नहीं है, तो कंटेंट को टैग की एक साधारण लिस्ट में शामिल करने के लिए अपडेट किया गया है। प्रत्येक को एक विशेष क्लास के साथ एक लिंक में लपेटा जाता है जिसे मैं बाद में देखने के लिए उपयोग करूंगा। मैंने विशेष रूप से उस सर्च को संभालने के लिए एक div भी जोड़ा है।

A note with tagsA note with tagsA note with tags

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

आपने देखा है कि आप इंडेक्स के आधार पर कंटेंट को कैसे प्राप्त कर सकते हैं। लेकिन यह ऐरे प्रॉपर्टीज के साथ कैसे काम करता है? बाहर निकलते है - इस से निपटने के लिए spec का एक विशिष्ट फ्लैग है: multiEntry। ऐरे-आधारित इंडेक्स बनाते समय, आपको यह वैल्यू true पर सेट करनी होगी। यहां बताया गया है कि मेरी एप्लिकेशन इसे कैसे संभालती है:

यह स्टोरेज आस्पेक्ट को अच्छी तरह से संभालता है। अब चलो सर्च के बारे में बात करते हैं। टैग लिंक क्लास के लिए क्लिक हैंडलर यहां दिया गया है:

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

आप फ़ोल्डर fulldemo5 में यह डेमो पा सकते हैं।


निष्कर्ष

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.