Advertisement
  1. Code
  2. Web Development

काम के साथ IndexedDB-हिस्सा 2

Scroll to top
Read Time: 9 mins

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

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


रिकॉर्ड अद्यतन कर रहा है

चलो चर्चा कैसे IndexedDB के साथ एक रिकॉर्ड को अद्यतन करने से शुरू करते हैं । यदि आप याद है, डेटा जोड़ने बहुत आसान था:

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

जोड़ें विधि की तरह, आप कार्रवाई के एसिंक्रोनस परिणाम को हैंडल करने के लिए विधियाँ असाइन कर सकते हैं ।


रिकॉर्ड्स हटाना

रिकॉर्ड हटाना विधि के माध्यम से किया जाता है । (वहां बड़ा आश्चर्य है.) आप बस रिकॉर्ड आप निकालना चाहते हैं की अनूठी पहचानकर्ता में पारित । यहां एक सरल उदाहरण है:

और IndexedDB के हर दूसरे पहलू की तरह, आप अतुल्यकालिक परिणामों के लिए अपने हैंडल जोड़ सकते हैं ।

तो, जैसा कि मैंने कहा, नहीं बहुत रोमांचक है, जो शायद अच्छा है । आप अपने एपीआई सरल, उबाऊ, और आश्चर्य की बात चाहते हैं । अब हम क्या सीखा है ले लो और इसे एक साथ लाने के लिए एक असली बनाने के लिए, यदि सरल, आवेदन ।


नोट अनुप्रयोग

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

Note AppNote AppNote App

नोट जोड़ें बटन क्लिक करने से एक प्रपत्र खुलता है:

Note App - Add FormNote App - Add FormNote App - Add Form

प्रपत्र में कुछ डेटा दर्ज करने के बाद, आप फिर नोट सहेज सकते हैं:

Note App - Saved NoteNote App - Saved NoteNote App - Saved Note

जैसा कि आप देख सकते हैं, आप संपादित करें और नोटों को नष्ट करने का विकल्प है । अंत में, यदि आप स्वयं पंक्ति क्लिक करते हैं, तो आप नोट पढ़ सकते हैं:

Note App - Note ViewNote App - Note ViewNote App - Note View

तो बिल्कुल नहीं रॉकेट विज्ञान, लेकिन IndexedDB विनिर्देशन का एक पूरा काम उदाहरण । यहां लिखे नोट कायम रहेंगे । आप अपने ब्राउज़र को बंद कर सकते हैं, अपने मशीन को पुनः आरंभ, जीवन और कविता मनन करने के लिए कुछ साल दूर ले, और जब आप ब्राउज़र फिर से खोलने अपने डेटा अभी भी वहाँ हो जाएगा. चलो अब कोड पर एक नज़र रखना ।

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

हमारी पहली टेंपलेट HTML फ़ाइल है । हमें केवल एक मिला है और इसमें से अधिकांश बॉयलरप्लेट बूटस्ट्रैप है:

जैसा कि ऊपर उल्लेख किया है, इस फ़ाइल का एक अच्छा आकार भाग बूटस्ट्रैप के लिए टेंपलेट कोड है । भागों हम देखभाल के बारे में noteList div हैं, noteDetail div, और noteForm । आप शायद अनुमान लगा सकते हैं कि इन DIVs हम आवेदन में चारों ओर उपयोगकर्ता क्लिक के रूप में अद्यतन हो जाएगा रहे हैं ।

हमारे कोर एप्लिकेशन फ़ाइल कोडिंग

अब हम app. js पर एक नज़र रखना, कोर फ़ाइल है कि हमारे आवेदन के लिए तर्क संभालती है ।

आप पहले समारोह की अनदेखी के रूप में यह सिर्फ तारीखों के लिए एक प्रारूप उपयोगिता है सकते हैं । चलो आगे jQuery दस्तावेज़ तैयार ब्लॉक करने के लिए छोड़ दें ।

ब्राउज़र समर्थन के लिए जांच कर रहा है

हमारे बहुत पहले कार्रवाई के लिए IndexedDB समर्थन के लिए जांच है । यदि उपयोगकर्ता का ब्राउज़र संगत नहीं है, तो हम एक चेतावनी का उपयोग करते है और फ़ंक्शन को निरस्त करते हैं । यह शायद उंहें एक पृष्ठ है कि पूरी तरह से बताते है कि क्यों वे आवेदन का उपयोग नहीं कर सकते में स्थानांतरित करना बेहतर होगा । (और स्पष्ट हो, हम भी एक आवेदन है कि एक बैकअप के रूप में WebSQL का उपयोग किया बना सकता है । लेकिन फिर से-मेरा ध्यान यहां सादगी पर है.)

कुछ jQuery चयनकर्ताओं कैशिंग के बाद, कि हम app भर में उपयोग करेंगे, हम तो हमारे IndexedDB डेटाबेस खोलो । डेटाबेस काफी सरल है । onupgradeneeded हेंडलर में आप देख सकते है एक वस्तु की दुकान नोटों बुलाया बनाया जा रहा है । एक बार सब कुछ किया है, onsuccess हेंडलर बंद displayNotes को फोन आग होगा ।

displayNotes फ़ंक्शन

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

हटाएं, संपादित करें, और फ़ंक्शन जोड़ें

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

सहेजें फ़ंक्शन

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


निष्कर्ष के तौर पर

यह भाग दो के लिए है! तीसरा लेख इस एप्लिकेशन को ले जाएगा और खोज और सरणी आधारित गुणों सहित अतिरिक्त सुविधाओं को जोड़ना शुरू कर देगा।

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.