LocalForage: मोज़िला से क्रॉस-ब्राउज़र स्थानीय भंडारण

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

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

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

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

लोकलफ्रॉज एक बहुत ही सरल जावास्क्रिप्ट लाइब्रेरी है जो लोकलस्टोरेज एपीआई के समान एपीआई का उपयोग करता है, एक ही बेसिक गेट, set , remove , clear और length मेथड के साथ, लेकिन कुछ अन्य महत्वपूर्ण सुधार हैं:

• कॉलबैक के साथ अतुल्यकालिक एपीआई;
• IndexedDB, WebSQL और लोकलस्टोरेज ड्राइवर (ब्राउज़र की क्षमताओं के आधार पर सबसे उपयुक्त ड्राइवर स्वचालित रूप से चुना गया है);
• ब्लॉब्स और मनमाने डेटा फॉर्मेट्स के लिए समर्थन, ताकि आप छवियों, फ़ाइलों और इतने पर स्टोर कर सकें;
• ECMAScript 6 वादा समर्थन करता है ।

IndexedDB और WebSQL का उपयोग करने से आप लोकलस्टोरेज की तुलना में बहुत अधिक डेटा स्टोर कर सकते हैं। गैर-अवरुद्ध अतुल्यकालिक एपीआई एप्लिकेशन को तेज और अधिक संवेदनशील बनाता है, क्योंकि एप्लिकेशन का मुख्य धागा कॉल get/set कॉल के निष्पादन के दौरान लटका नहीं होता है। वादों के लिए समर्थन आपको कॉलबैक से स्पेगेटी के बिना स्वच्छ कोड लिखने की अनुमति देता है। बेशक, यदि आप कॉलबैक पसंद करते हैं, तो आप उनका उपयोग कर सकते हैं।

बात करना बंद करो, मुझे दिखाओ कि यह कैसे काम करता है!

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

 //  ,      var config = { fullName: document.getElementById('name').getAttribute('value'), userId: document.getElementById('id').getAttribute('value') }; //   localStorage.setItem('config', JSON.stringify(config)); //      var config = JSON.parse(localStorage.getItem('config')); 

कृपया ध्यान दें कि लोकलस्टोरेज सभी सूचनाओं को स्ट्रिंग्स के रूप में संग्रहीत करता है, इसलिए आपको सब कुछ क्रमबद्ध JSON में परिवर्तित करना होगा।

सब कुछ बहुत सरल और तार्किक है, लेकिन आप तुरंत कई समस्याओं को नोटिस कर सकते हैं:

• Cinhronnost। हमें डिस्क से डेटा को पढ़ने और पार्सर द्वारा संसाधित किए जाने तक इंतजार करना होगा, चाहे वह किस आकार का हो। इससे एप्लिकेशन की जवाबदेही कम हो जाती है। यह मोबाइल उपकरणों पर विशेष रूप से खराब है - मुख्य एक को निष्पादन के बाद अवरुद्ध किया जाता है जबकि डेटा एक्सेस किया जा रहा है, यही कारण है कि एप्लिकेशन धीमा और ठंड लगने लगता है।
• सब कुछ तार के रूप में संग्रहीत किया जाता है। हमें लगातार JSON.parse और JSON.stringify का उपयोग JSON.parse JSON.stringify । ऐसा इसलिए है क्योंकि लोकलस्टोरेज केवल जावास्क्रिप्ट स्ट्रिंग्स के साथ काम कर सकता है। कोई संख्या नहीं, बूलियन मान, बूँद, और बहुत कुछ। यदि आप संख्याओं या सरणियों को संग्रहीत करने की आवश्यकता है, तो यह कष्टप्रद है और बाइनरी डेटा के साथ काम करना लगभग असंभव है (या कम से कम राक्षसी धीमी गति से)।

लोकलफ्रेज के साथ जीवन को आसान बनाना

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

कोड अनुक्रमणिका:

 // IndexedDB. var db; var dbName = "dataspace"; var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ]; var request = indexedDB.open(dbName, 2); request.onerror = function(event) { //  . }; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore("users", { keyPath: "id" }); objectStore.createIndex("fullName", "fullName", { unique: false }); objectStore.transaction.oncomplete = function(event) { var userObjectStore = db.transaction("users", "readwrite").objectStore("users"); } }; //  ,   ,      var transaction = db.transaction(["users"], "readwrite"); // -        transaction.oncomplete = function(event) { console.log("All done!"); }; transaction.onerror = function(event) { //     }; var objectStore = transaction.objectStore("users"); for (var i in users) { var request = objectStore.add(users[i]); request.onsuccess = function(event) { //         console.log(event.target.result); }; } 

लोकलफ्रेज कोड:

 //     var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ]; localForage.setItem('users', users, function(result) { console.log(result); }); 

WebSQL वाला कोड IndexedDB के साथ कोड की तुलना में थोड़ा कम होगा, लेकिन इसे अभी भी स्थानीय पाठ की तुलना में बहुत अधिक पाठ की आवश्यकता होगी।

सिर्फ तार नहीं

मान लीजिए कि आप स्थानीय रूप से या न केवल एक उपयोगकर्ता के बारे में पाठ डेटा का उपयोग करना चाहते हैं, बल्कि उसका अवतार भी। स्थानीय सामग्री के साथ, यह बहुत सरलता से किया जाता है:

 //   AJAX- var request = new XMLHttpRequest(); // ,      id=1 request.open('GET', "/users/1/profile_picture.jpg", true); request.responseType = 'arraybuffer'; //   ,    request.addEventListener('readystatechange', function() { if (request.readyState === 4) { // readyState DONE //    .  localStorage   localForage.setItem('user_1_photo', request.response, function() { //  ,  . }); } }); request.send(); 

आप कोड की सिर्फ तीन पंक्तियों का उपयोग करके स्टोरेज से एक फोटो पुनः प्राप्त कर सकते हैं:

 localForage.getItem('user_1_photo', function(photo) { //  data URI   -     img. console.log(photo); }); 

कॉलबैक और वादे

यदि आपको कॉलबैक पसंद नहीं है, तो आप ES6 वादों का उपयोग कर सकते हैं। यदि आप वादों का उपयोग करके इसे फिर से लिखेंगे तो यह अंतिम उदाहरण दिखेगा:

 localForage.getItem('user_1_photo').then(function(photo) { //  data URI   -     img. console.log(photo); }); 

बेशक, यह एक कृत्रिम है और बहुत स्पष्ट उदाहरण नहीं है। यदि आप प्रोग्रामिंग की इस शैली को वास्तविक कोड में देखना चाहते हैं - यहाँ चारों ओर से उपयुक्त स्निपेट है ।

क्रॉस-ब्राउज़र संगतता

लोकलफ्रॉग सभी आधुनिक ब्राउज़रों का समर्थन करता है। IndexedDB Safari ((IE 10+, IE Mobile 10+, Firefox 10+, Android 25+ के लिए फ़ायरफ़ॉक्स), Chrome 23+, Android 32+ के लिए Chrome, Opera 15+) को छोड़कर सभी आधुनिक ब्राउज़रों में उपलब्ध है। Safari और एक मानक Android ब्राउज़र ()। 2.1+) WebSQL का उपयोग करें।

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

लाइब्रेरी अभी भी बहुत युवा है, कार्यक्षमता का हिस्सा केवल योजनाबद्ध है, इसलिए विकास में शामिल हों, यदि आप लाइब्रेरी को और अधिक करने में सक्षम होना चाहते हैं तो त्रुटि संदेश और पैच भेजें !