HTML5 लोकलस्टोरीज कीज़ प्राप्त करें

Question

मैं बस सोच रहा हूं कि सभी प्रमुख मूल्यों को कैसे प्राप्त किया जाए localStorage।

---

मैंने एक साधारण जावास्क्रिप्ट लूप के साथ मूल्यों को पुनः प्राप्त करने की कोशिश की है

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

लेकिन यह केवल तभी काम करता है जब चाबियाँ प्रगतिशील संख्याएं हैं, जो 1 से शुरू होती हैं।

---

सभी उपलब्ध डेटा को प्रदर्शित करने के लिए मुझे सभी कुंजियाँ कैसे मिलेंगी?

Comments

कैसे

— epascarello

stackoverflow.com/questions/3138564/… के

— kubetz

यह लूप i = 1 से क्यों शुरू होता है और i = localStorage.length के साथ समाप्त होता है? ब्राउज़रों मैं परीक्षण किया है (क्रोम) में, पाश localStorage.length में 0 और अंत में शुरू कर देना चाहिए - 1 ...

— लुइस नियंत्रण रेखा

@LouisLC क्योंकि मैं अपनी कुंजी के लिए प्रगतिशील संख्याओं का उपयोग कर रहा था (जैसे कि रिलेशनल डेटाबेस में प्राथमिक कुंजी)।

— सिमोन

Answer 1

ES2017 में आप उपयोग कर सकते हैं:

Object.entries(localStorage)

Comments

और मुझे लगता Object.keys()है कि उम्मीद के मुताबिक काम करता है?

Answer 2

for (var key in localStorage){
   console.log(key)
}

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

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

Comments

इस लिंक में .... stackoverflow.com/questions/15313606/… ... वे इन सभी अजीब तरीकों का उपयोग क्यों कर रहे हैं, जिससे वे माइक्रो स्टोरेज का उपयोग कर सकते हैं?

"सर्वश्रेष्ठ / सबसे सुरक्षित" कोड के लिए कई प्रश्न: 1) localStorage.lengthसीधे घोषणा और इसका उपयोग क्यों न करें? 2) इसे लूप के लिए क्यों घोषित किया? 3) क्यों ++iपसंद किया जाता है i++?

— लुसियानो बर्गमैन

क्या आपने वास्तव में इसकी कोशिश की थी? ++iसबसे निश्चित रूप से पाश शुरू नहीं करता हैi = 1 । कोष्ठक के अंदर तीसरी अभिव्यक्ति का मूल्यांकन प्रत्येक पुनरावृत्ति के बाद किया जाता है । i++और ++iदोनों पर सटीक समान प्रभाव पड़ता है i। अंतर यह है कि वेतन वृद्धि के बाद ++iके नए मूल्य का मूल्यांकन करता है i, जबकि वेतन वृद्धि i++से i पहले के मूल्य का मूल्यांकन करता है । इससे यहाँ बिल्कुल कोई फर्क नहीं पड़ता है, क्योंकि हम सभी की परवाह करते हैं कि वेतन वृद्धि का दुष्प्रभाव है i, न कि अभिव्यक्ति का मूल्य।

— केविन एननिस

यह ध्यान देने योग्य है कि आजकल Object.keys(localStorage)इस परिदृश्य के लिए पूरी तरह से काम करता है, जब तक कि आपको IE <9. का समर्थन करने की आवश्यकता नहीं है

— एड्रियन

यह भी ध्यान रखना उपयोगी है कि यदि आप स्वयं कुंजी का नाम प्रदर्शित करना चाहते हैं, तो आप इस localStorage.key( i )भाग के साथ कर सकते हैं ।

— शॉन कोलंबो

Answer 3

मुझे इस तरह से एक आसानी से दिखाई देने वाली वस्तु बनाना पसंद है।

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

मैं कुकीज़ के साथ भी ऐसा ही काम करता हूं।

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});

Comments

मैं वस्तुओं पर चलने की शैली पसंद करता हूं।

— जोनाथन स्टेलवाग

Answer 4

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

Answer 5

आप localStorage.key(index)स्ट्रिंग प्रतिनिधित्व को वापस करने के लिए फ़ंक्शन का उपयोग कर सकते हैं , जहां indexnth ऑब्जेक्ट है जिसे आप पुनर्प्राप्त करना चाहते हैं।

Answer 6

यदि ब्राउज़र HTML5 लोकलस्टोरीज का समर्थन करता है, तो उसे एरे.प्रोटोटाइप.मैप को भी लागू करना चाहिए, जिससे यह सक्षम हो:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})

Comments

आप ऐसा भी कर सकते हैं new Array(this.localStorage.length).fill(0)जो लागू इमो का उपयोग करने की तुलना में थोड़ा कम हैकी महसूस करता है।

— लेनी

Answer 7

चूँकि प्रश्न में कुंजियों को खोजने का उल्लेख है, मुझे लगा कि मैं उल्लेख करूँगा कि हर कुंजी और मूल्य जोड़ी को दिखाने के लिए, आप इसे इस तरह कर सकते हैं (केविन के उत्तर के आधार पर):

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

यह प्रारूप "कुंजी: मान" में डेटा को लॉग करेगा

(केविन: यदि आप चाहें तो बस इस जानकारी को अपने उत्तर में लेने के लिए स्वतंत्र महसूस करें!)

Answer 8

यह लोकलस्टोरेज पर सभी कीज़ और वैल्यूज़ को प्रिंट करेगा:

ES6:

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}

Answer 9

आप इस तरह से कुंजी और मान प्राप्त कर सकते हैं:

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}

Answer 10

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

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}

Answer 11

उपयोग करने वालों का उल्लेख करने के लिए Object.keys(localStorage)... क्योंकि यह फ़ायरफ़ॉक्स में काम नहीं करेगा (विडंबना यह है कि फ़ायरफ़ॉक्स कल्पना के लिए वफादार है)। इस पर विचार करो:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

क्योंकि कुंजी, getItem और setItem प्रोटोटाइप तरीके हैं Object.keys(localStorage)केवल वापस आएंगे ["key2"]।

आप ऐसा कुछ करने के लिए सर्वश्रेष्ठ हैं:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}

Comments

@ डकारम क्योंकि फ़ायरफ़ॉक्स सही ढंग से कल्पना का पालन करता है, कुंजी, getItem और setItem अनुपलब्ध होगा यदि आप उपयोग करते हैं object.keys()... तो मैं उसे प्रतिबिंबित करने के लिए अपने उत्तर को अपडेट करूंगा।

— माइक रैटक्लिफ

बस स्थानीय भंडारण के लिए युक्ति पढ़ें और मैंने यह नहीं देखा कि आपने क्या उल्लेख किया है।

— डार्कराम

और ऑब्जेक्ट के लिए युक्ति पढ़ें।

— डार्कम

@Darkrum html.spec.whatwg.org/multipage/… पर देखें और आप देख सकते हैं कि कल्पना IDL को परिभाषित करती है [Exposed=Window]। यह मेरे द्वारा वर्णित व्यवहार का परिणाम है। यदि इसे निर्दिष्ट किया गया था, तो यह वह [Exposed=Window,OverrideBuiltins]व्यवहार देगा जो हम अपेक्षा करते हैं लेकिन कल्पना निर्दिष्ट नहीं करती है OverrideBuiltins। आप इसके बारे में चर्चा whatwg / html में देख सकते हैं: github.com/whatwg/html/issues/183

— माइक रैटक्लिफ

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

— 19

Answer 12

हम नाम से भी पढ़ सकते हैं।

मान लें कि हमने इस तरह 'उपयोगकर्ता' नाम के साथ मान बचाया है

localStorage.setItem('user', user_Detail);

तब हम इसका उपयोग करके पढ़ सकते हैं

localStorage.getItem('user');

मैंने इसका उपयोग किया और यह सुचारू रूप से काम कर रहा है, लूप के लिए करने की आवश्यकता नहीं है