क्या LocalStorage.getItem ('आइटम') localStorage.item या लोकलस्टोरेज ['आइटम'] से बेहतर है?

Question

मैंने हाल ही में लोकलस्टोरेज के बारे में एक सवाल पूछा । जब आइटम अभी तक सेट नहीं किया गया था तब उपयोग करना JSON.parse(localStorage.item)और JSON.parse(localStorage['item'])वापस लौटने के लिए काम नहीं कर रहे थे NULL।

हालांकि, JSON.parse(localStorage.getItem('item')काम किया। और यह पता चला, JSON.parse(localStorage.testObject || null)भी काम करता है।

टिप्पणियों में से एक ने मूल रूप से कहा कि localStorage.getItem()और localStorage.setItem()हमेशा पसंद किया जाना चाहिए:

गेट्टर और सेटर एलएस एपीआई के साथ काम करने के लिए एक सुसंगत, मानकीकृत और क्रॉसबोवर संगत तरीका प्रदान करते हैं और हमेशा अन्य तरीकों से अधिक पसंद किया जाना चाहिए। - क्रिस्टोफ़

मुझे लोकलस्टोरेज के लिए शॉर्टहैंड डॉट और ब्रैकेट नोटेशन का उपयोग करना पसंद है, लेकिन मैं दूसरों को इस बारे में जानने के लिए उत्सुक हूं। क्या LocalStorage.getItem ('आइटम') localStorage.item या लोकलस्टोरेज ['आइटम'] से बेहतर है या जब तक वे काम करते हैं, शॉर्टहैंड नोटेशन ठीक हैं?

Comments

मेरा मानना ​​है कि क्रिस्टोफ़ ने अपने तर्क को बिल्कुल स्पष्ट कर दिया है। getItemऔर setItemकर रहे हैं मानकीकृत काम करने के रास्ते।

— फेब्रीको मट्टे सेप

समझा। उन सिफारिशों के माध्यम से स्किम करने के लिए बहुत कम नींद आती है, लेकिन जैसा कि यह वेबस्टोर एपीआई अपेक्षाकृत नया है, मैं व्यक्तिगत रूप से ठीक से प्रलेखित getItem/ setItemविधियों के साथ रहना चाहूंगा । मैं बाद में फिर से ऐनक पढ़ूंगा, लेकिन आपके प्रश्न का उत्तर देने का एकमात्र विफल-सा तरीका सभी प्रमुख ब्राउज़रों पर परीक्षण के दौरान कर रहा हूं।

— फेब्रीको मट्टे सेप

विनिर्देशन कहता है "संग्रहण ऑब्जेक्ट पर समर्थित संपत्ति नाम प्रत्येक कुंजी / मूल्य जोड़ी की कुंजी है जो वर्तमान में ऑब्जेक्ट से जुड़ी सूची में मौजूद है।" क्या यह localStorage.itemभी मानकीकृत नहीं है ?

— बमर

@ बरमार थोड़ा देर से जवाब, लेकिन इस सवाल के इतने सारे कारण देखने और यहां वापस आने के बाद, मैं जवाब दूंगा कि आप बिल्कुल सही हैं। हालाँकि, मैं फिर से उपयोग करने की सलाह दूंगा getItem/ setItemक्योंकि ये विधियाँ localStorageऑब्जेक्ट के मौजूदा गुणों के साथ विरोध नहीं करती हैं । उदाहरण: localStorage.setItem('getItem', 'blah'); console.log(localStorage.getItem('getItem'));काम करता है, जबकि localStorage.getItem = 'blah';लोकलस्टोरेज की getItemविधि को अधिलेखित करेगा । jsfiddle.net/DrquY

— फेब्रीको मैटे

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

— एरिक रेपेन

Answer 1

दोनों प्रत्यक्ष संपत्ति का उपयोग ( localStorage.itemया localStorage['item']) और कार्यात्मक इंटरफ़ेस का उपयोग करके ( localStorage.getItem('item')) ठीक काम करते हैं। दोनों मानक और क्रॉस-ब्राउज़र संगत हैं। ^* युक्ति के अनुसार :

संग्रहण ऑब्जेक्ट पर समर्थित प्रॉपर्टी नाम प्रत्येक कुंजी / मान जोड़ी की कुंजी है जो वर्तमान में ऑब्जेक्ट से जुड़ी सूची में मौजूद है, इस क्रम में कि चाबियाँ अंतिम बार भंडारण क्षेत्र में जोड़ी गई थीं।

जब अनुरोधित नाम के साथ कोई कुंजी / मान जोड़ी नहीं मिलती है तो वे बस अलग तरह से व्यवहार करते हैं। उदाहरण के लिए, यदि कुंजी 'item'मौजूद नहीं है, var a = localStorage.item;में परिणाम होगा aजा रहा है undefined, जबकि var a = localStorage.getItem('item');में परिणाम होगा aमूल्य होने null। जैसा कि आपने खोजा है, undefinedऔर nullजावास्क्रिप्ट / एक्मास्क्रिप्ट में विनिमेय नहीं है। :)

EDIT: जैसा कि क्रिस्टोफ़ अपने उत्तर में बताते हैं , कार्यात्मक इंटरफ़ेस मज़बूती से स्टोर करने और मानों को पूर्वनिर्धारित गुणों के बराबर मान के तहत पुनर्प्राप्त करने का एकमात्र तरीका है localStorage। (इन के छह हैं: length, key, setItem, getItem, removeItem, और clear।) तो, उदाहरण के लिए, निम्नलिखित हमेशा काम:

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

विशेष रूप से ध्यान दें कि पहला कथन संपत्ति को प्रभावित नहीं करेगा localStorage.length(शायद 'length'पहले से कोई कुंजी नहीं होने पर इसे बढ़ाकर छोड़कर localStorage)। इस संबंध में, कल्पना आंतरिक रूप से असंगत लगती है।

हालाँकि, निम्नलिखित शायद वह नहीं करेंगे जो आप चाहते हैं:

localStorage.length = 2;
console.log(localStorage.length);

दिलचस्प बात यह है कि, पहला क्रोम में एक नो-ऑप है, लेकिन फ़ायरफ़ॉक्स में कार्यात्मक कॉल का पर्याय है। दूसरा हमेशा मौजूद कीज की संख्या को लॉग करेगा localStorage।

^* _{यह उन ब्राउज़रों के लिए सही है जो पहली बार में वेब स्टोरेज का समर्थन करते हैं। (इसमें बहुत सारे आधुनिक डेस्कटॉप और मोबाइल ब्राउज़र शामिल हैं।) ऐसे वातावरण के लिए जो कुकीज़ या अन्य तकनीकों का उपयोग करके स्थानीय भंडारण का अनुकरण करते हैं, व्यवहार उस शिम पर निर्भर करता है जिसका उपयोग किया जाता है। इसके लिए कई पॉलीफिल मिल localStorageसकते हैं ।}

Answer 2

प्रश्न पहले से ही काफी पुराना है, लेकिन जब से मुझे प्रश्न में उद्धृत किया गया है, मुझे लगता है कि मुझे अपने बयान के बारे में दो शब्द कहने चाहिए।

स्टोरेज ऑब्जेक्ट विशेष है, यह एक ऑब्जेक्ट है, जो कुंजी / मूल्य जोड़े की सूची तक पहुंच प्रदान करता है। इस प्रकार यह एक साधारण वस्तु या सरणी नहीं है।

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

एक सरणी के साथ आप कर सकते हैं:

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

यहाँ हमारे पास गेटर्स / सेटर का उपयोग करने का पहला कारण है। यदि आप कोई आइटम सेट करना चाहते हैं, तो क्या होगा length?

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

भंडारण वस्तु के अन्य सदस्यों के साथ, यह और भी महत्वपूर्ण है, क्योंकि वे लेखन योग्य हैं और आप गलती से इस तरह के तरीकों को अधिलेखित कर सकते हैं getItem। एपीआई तरीकों का उपयोग इन संभावित समस्याओं में से किसी को रोकता है और एक सुसंगत इंटरफ़ेस प्रदान करता है।

इसके अलावा दिलचस्प बिंदु कल्पना में निम्नलिखित पैराग्राफ है (मेरे द्वारा जोर दिया गया है):

असफलता के संबंध में setItem () और removeItem () विधियां परमाणु होनी चाहिए। विफलता के मामले में, विधि कुछ भी नहीं करती है। यही है, डेटा संग्रहण क्षेत्र में परिवर्तन या तो सफल होना चाहिए, या डेटा संग्रहण क्षेत्र को बिल्कुल नहीं बदलना चाहिए।

सैद्धांतिक रूप से गेटर्स / सेटर्स और []एक्सेस के बीच कोई अंतर नहीं होना चाहिए , लेकिन आप कभी नहीं जानते ...

Comments

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

— एरिक रिपन

नाम टक्कर के बारे में बात उत्कृष्ट है। lengthसंपत्ति बदल जाएगा नहीं (Chrome और Firefox में कम से कम [*]) यदि आप फोन localStorage.setItem("length", something);है, लेकिन आप प्राप्त कर सकते हैं somethingके साथ localStorage.getItem("length");। दिलचस्प है, localStorage.length = something;क्रोम में असाइन करना एक नो-ऑप है, लेकिन फ़ायरफ़ॉक्स में यह somethingकुंजी के तहत स्टोर करेगा "length"(जिसे आप तब केवल कार्यात्मक इंटरफ़ेस का उपयोग करके पुनर्प्राप्त कर सकते हैं)। [*] वास्तव में, फ़ायरफ़ॉक्स में, lengthसंपत्ति बदल जाएगी यदि कुंजी "length"पहले से ही नहीं है localStorage।

— टेड हॉप

@ErikReppen - के अनुसार कल्पना , localStorageछह पूर्वनिर्धारित गुण है: length, key, getItem, setItem, removeItem, और clear।

— टेड हॉप

Answer 3

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन चूंकि किसी ने वास्तव में प्रदर्शन का उल्लेख नहीं किया है, इसलिए मैंने कुछ JsPerf परीक्षणों को बेंचमार्क करने के लिए और साथ ही एक सुसंगत इंटरफ़ेस के रूप में स्थापित किया है getItemऔर setItemडॉट संकेतन या कोष्ठक का उपयोग करने की तुलना में लगातार तेज है और साथ ही साथ पढ़ने में बहुत आसान है।

यहाँ JsPerf पर मेरे परीक्षण हैं

Comments

ur jsPerf ने अपने परीक्षण में कोष्ठक को शामिल नहीं किया। मैंने उन्हें जोड़ा है और कुछ परीक्षण चलाए हैं, प्रदर्शन ब्राउज़र-आधारित है। क्रोम और फ़ायरफ़ॉक्स दोनों पर, getItemऔर setItemप्रत्येक श्रेणी में सबसे धीमे थे, क्रोम पर सबसे तेज़ और ब्रैकेट फ़ायरफ़ॉक्स पर सबसे तेज़ थे। मुझे यह भी लगता है कि 'पढ़ने में बहुत आसान होना' पूरी तरह से व्यक्तिपरक है ... हाँ यह फ़ंक्शन को उसके प्रदर्शन को बताता है, लेकिन किसी ने कभी भी ऑब्जेक्ट या सरणी चर के साथ काम किया है, यह आधे सेकंड में पता चल जाएगा कि डॉट / ब्रैकेट के साथ क्या हो रहा है।

— प्लांटइंडिया

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

— डेव मैकिन्टोश

Answer 4

जैसा कि उल्लेख किया गया था, कोई भी कुंजी के अलावा लगभग कोई अंतर नहीं है। प्रदर्शन के अंतर पर भिन्न होता है पर क्या ब्राउज़र / OS का उपयोग कर रहे निर्भर करता है। लेकिन यह वास्तव में अलग नहीं है।

मैं आपको मानक इंटरफ़ेस का उपयोग करने का सुझाव देता हूं, सिर्फ इसलिए कि यह इसका उपयोग करने का एक अनुशंसित तरीका है।

Comments

"मैं आपको मानक इंटरफ़ेस का उपयोग करने का सुझाव देता हूं" - दोनों इंटरफेस मानक में निर्दिष्ट हैं।

— टेड हॉप

@TedHopp मुझे लगता है कि केवल setItem और getItem मानक में निर्दिष्ट हैं ।

— साल्वाडोर डाली

इसके विपरीत। मानक से: "स्टोरेज ऑब्जेक्ट पर समर्थित प्रॉपर्टी नाम प्रत्येक कुंजी / मूल्य जोड़ी की कुंजी है जो वर्तमान में ऑब्जेक्ट से जुड़ी सूची में मौजूद है, इस क्रम में कि चाबियाँ आखिरी बार भंडारण क्षेत्र में जोड़ी गई थीं।"

— टेड हॉप