IndexedDB वैचारिक रूप से HTML5 स्थानीय संग्रहण से कैसे भिन्न है?

Question

1. दोनों indexedDB और स्थानीय भंडारण कुंजी मूल्य स्टोर हैं। दो कुंजी / मूल्य स्टोर होने का क्या फायदा है?
2. indexedDB अतुल्यकालिक है, लेकिन जुड़ता है (सबसे अधिक समय लेने वाली चीज) मैनुअल है। वे उसी थ्रेड में चलते दिखाई देते हैं, जैसे कि एसिंक्स कॉल किए गए थे। यह UI को कैसे ब्लॉक नहीं करेगा?
3. indexedDB एक बड़े स्टोर की अनुमति देता है। HTML5 स्टोर का आकार क्यों नहीं बढ़ाया?
4. मैं अपना सिर खुजला रहा हूं। IndexedDB का बिंदु क्या है?

Answer 1

IndexedDB उसी तरह की-वैल्यू स्टोर नहीं है जिस तरह से Local Storage है। स्थानीय भंडारण केवल तारों को संग्रहीत करता है, इसलिए स्थानीय भंडारण में एक वस्तु डालने के लिए सामान्य दृष्टिकोण JSON.stringify है:

myObject = {a: 1, b: 2, c: 3};
localStorage.setItem("uniq", JSON.stringify(myObject));

यह ऑब्जेक्ट को कुंजी के साथ खोजने के लिए ठीक है uniq, लेकिन स्थानीय भंडारण से वापस myObject के गुणों को प्राप्त करने का एकमात्र तरीका JSON है। ऑब्जेक्ट को चेक करें और इसकी जांच करें:

var myStorageObject = JSON.parse(localStorage.getItem("uniq"));
window.alert(myStorageObject.b);

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

IndexedDB के साथ आप मूल्य में तार के अलावा अन्य सामान स्टोर कर सकते हैं : "इसमें साधारण प्रकार जैसे DOMString और Date के साथ-साथ Object और Array इंस्टेंस शामिल हैं।" इतना ही नहीं, लेकिन आप उन वस्तुओं के गुणों पर अनुक्रमित बना सकते हैं जिन्हें आपने मूल्य में संग्रहीत किया है। इसलिए IndexedDb के साथ आप उन हजार वस्तुओं को इसमें डाल सकते हैं, लेकिन bसंपत्ति पर एक इंडेक्स बना सकते हैं और इसका उपयोग केवल उन वस्तुओं को पुनः प्राप्त करने के लिए कर सकते हैं, जहां b==2स्टोर में हर वस्तु को स्कैन किए बिना ओवरहेड किया जाता है।

कम से कम यही विचार है। IndexedDB API बहुत सहज नहीं है।

वे उसी थ्रेड में चलते दिखाई देते हैं, जैसे कि एसिंक्स कॉल किए गए थे। यह UI को कैसे ब्लॉक नहीं करेगा?

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

indexedDB एक बड़े स्टोर की अनुमति देता है। HTML5 स्टोर का आकार क्यों नहीं बढ़ाया?

क्योंकि, उचित अनुक्रमण के बिना, यह तेजी से धीमी हो जाएगी जितना बड़ा इसे मिला।

Comments

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

— स्टीफन

इसके अलावा, indexeddb वेब पेजों और उन पर चलने वाले सेवा कर्मचारियों के बीच संचार का एक तरीका है। लोकलस्टोरेज सेवाकर्मियों के लिए सुलभ नहीं है।

— अवलोक

IndexedDB एपीआई सुनिश्चित करने के लिए बहुत सहज नहीं है, लेकिन डेक्सरी जैसे रैपर लाइब्रेरी हैं , यह चीजों को आसान बनाता है

— fengshuo

@robertc, आपने ऑब्जेक्ट को खोजने के लिए सभी ऑब्जेक्ट्स के माध्यम से ट्रैवर्सिंग के बारे में कहा है जहां b == 2, जब हमें लोकलस्टोरेज में स्टोर किए गए प्रत्येक आइटम से जुड़ी एक कुंजी है तो इसकी आवश्यकता क्यों है?

— टीनू जोस K

@ TICK20 क्योंकि बिना उस वस्तु को प्राप्त किए बिना चाबी का उपयोग करने का कोई तरीका नहीं है

— robertc

Answer 2

मैं इस अच्छे लेख के बारे में चर्चा कर रहा था जिसमें स्थानीय भंडार बनाम अनुक्रमित और अन्य संभावित विकल्पों के बारे में चर्चा की गई थी।

(सभी निम्न मान मिलीसेकंड में हैं)

https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/

लेख से संक्षेप में (पूरी तरह से लेखक के विचार),

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

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

4. IndexedDB एक वेब कार्यकर्ता में अच्छी तरह से काम करता है, जहां यह लगभग उसी गति से चलता है, लेकिन DOM को अवरुद्ध किए बिना। एकमात्र अपवाद सफारी है, जो किसी कार्यकर्ता के अंदर IndexedDB का समर्थन नहीं करता है, लेकिन फिर भी यह UI को ब्लॉक नहीं करता है।

5. अगर डेटा सरल और न्यूनतम है, तो स्थानीयकरण आदर्श है

Answer 3

रॉबर्डक के awser में जोड़कर, indexedDB 'पर्वतमाला' को जानता है इसलिए आप 'ab' से शुरू होने वाले सभी रिकॉर्ड्स को खोज और प्राप्त कर सकते हैं और 'abc' आदि को खोजने के लिए पेट के साथ समाप्त हो सकते हैं।

Answer 4

ब्राउज़र के कंसोल में निम्न चलाएँ। यह लोकलस्टोरेज और सेशनस्टोरेज के साथ एप्लीकेशन> स्टोरेज में एक अलग इकाई बनाएगा

const request = indexedDB.open("notes");
request.onupgradeneeded = e => {
  alert("upgrade");
}
request.onsuccess = e => {
  alert("success");
}
request.onerror = e => {
  alert("error");
}

आप इस स्टोरेज को अन्य दो स्टोरेज के विपरीत सभी CRUD ऑपरेशंस के साथ क्वेरी कर सकते हैं जिनमें लचीलापन कम है और इसके साथ खेलने के लिए फंक्शन हैं।