blocks|key|1211666|text|您可以使用key方法。localStorage.key(index)返回indexth键(顺序由实现定义，但在添加或删除键之前保持不变)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1211667|for+(var+i+=+0;+i+<+localStorage.length;+i%2B%2B){
++++$('body').append(localStorage.getItem(localStorage.key(i)));
}|code-block|syntax|javascript|1211668|如果顺序很重要，您可以存储一个JSON序列化数组：|1211669|localStorage.setItem("words",+JSON.stringify(["Lorem",+"Ipsum",+"Dolor"]));|1211670|该规范草案声称，任何支持structured+clone的对象都可以是值。但这似乎还没有得到支持。|1211671|编辑:要加载数组，请添加到数组中，然后存储：|1211672|var+words+=+JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words",+JSON.stringify(words));|1211673|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/html5/webstorage/#dom-storage-key|1|http://dev.w3.org/html5/spec/common-dom-interfaces.html#safe-passing-of-structured-data^0|5|3|B|N|10|5|5|3|0|0|0|0|0|C|G|1|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|F|3|G|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1F|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|Q|3|R|5|6|7|1L|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1M|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

You can use the <a href="http://dev.w3.org/html5/webstorage/#dom-storage-key" rel="noreferrer"><code>key</code></a> method. <code>localStorage.key(index)</code> returns the <code>index</code>th key (the order is implementation-defined but constant until you add or remove keys).

<pre><code>for (var i = 0; i &lt; localStorage.length; i++){
 $('body').append(localStorage.getItem(localStorage.key(i)));
}
</code></pre>

If the order matters, you could store a JSON-serialized array:

<pre><code>localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));
</code></pre>

The draft spec claims that any object that supports <a href="http://dev.w3.org/html5/spec/common-dom-interfaces.html#safe-passing-of-structured-data" rel="noreferrer">structured clone</a> can be a value. But this doesn't seem to be supported yet.

EDIT: To load the array, add to it, then store:

<pre><code>var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));
</code></pre>

blocks|key|997487|text|最简单的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997488|Object.keys(localStorage).forEach(function(key){
+++console.log(localStorage.getItem(key));
});|code-block|syntax|javascript|997489|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The simplest way is:

<pre><code>Object.keys(localStorage).forEach(function(key){
 console.log(localStorage.getItem(key));
});
</code></pre>

blocks|key|1211706|text|这对我在Chrome中是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211707|for(var+key+in+localStorage)+{
++$('body').append(localStorage.getItem(key));
}|code-block|syntax|javascript|1211708|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me in Chrome:

<pre><code>for(var key in localStorage) {
 $('body').append(localStorage.getItem(key));
}
</code></pre>

blocks|key|997465|text|在前面答案的基础上，这里有一个函数，它将在不知道键值的情况下按键遍历本地存储。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997466|function+showItemsByKey()+{
+++var+typeofKey+=+null;
+++for+(var+key+in+localStorage)+{
+++++++typeofKey+=+(typeof+localStorage[key]);
+++++++console.log(key,+typeofKey);
+++}
}|code-block|syntax|javascript|997467|如果您检查控制台输出，您将看到您的代码添加的项都具有typeof字符串。而内置的项要么是函数{原生代码}，要么是长度属性的数字。您可以使用typeofKey变量仅对字符串进行过滤，以便只显示您的项目。|997468|注意:即使您将数字或布尔值存储为值，这也是有效的，因为它们都存储为字符串。|997469|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Building on the previous answer here is a function that will loop through the local storage by key without knowing the key values. 

<pre><code>function showItemsByKey() {
 var typeofKey = null;
 for (var key in localStorage) {
 typeofKey = (typeof localStorage[key]);
 console.log(key, typeofKey);
 }
}
</code></pre>

If you examine the console output you will see the items added by your code all have a typeof string. Whereas the built-in items are either functions { [native code] } or in the case of the length property a number. You could use the typeofKey variable to filter just on the strings so only your items are displayed.

Note this works even if you store a number or boolean as the value as they are both stored as strings.

blocks|key|1211783|text|localStorage是一个Object。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1211784|我们可以使用JavaScript+for/in+Statement遍历它，就像其他对象一样。|1211785|我们将使用.getItem()来访问每个键(x)的值。|1211786|for+(x+in+localStorage){
++++console.log(localStorage.getItem(x));
}|code-block|syntax|javascript|1211787|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/prop_win_localstorage.asp|1|https://www.w3schools.com/js/js_object_definition.asp|2|https://www.w3schools.com/jsref/jsref_forin.asp^0|0|C|F|6|0|C|0|F|6|1|0|6|R|2|0|5|A|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|H|3|I|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]]]

<a href="https://www.w3schools.com/jsref/prop_win_localstorage.asp" rel="nofollow noreferrer"><code>localStorage</code></a> is an <a href="https://www.w3schools.com/js/js_object_definition.asp" rel="nofollow noreferrer"><code>Object</code></a>.

We can loop through it with <a href="https://www.w3schools.com/jsref/jsref_forin.asp" rel="nofollow noreferrer">JavaScript for/in Statement</a> just like any other Object.

And we will use <code>.getItem()</code> to access the value of each key (x).

<pre><code>for (x in localStorage){
 console.log(localStorage.getItem(x));
}
</code></pre>

blocks|key|997484|text|所有这些答案都忽略了不同浏览器之间的localStorage实现之间的差异。这个领域的贡献者应该用他们所描述的平台来严格限定他们的回复。https://developer.mozilla.org/en/docs/Web/API/Window/localStorage上记录了一个浏览器范围的实现，虽然功能非常强大，但只包含几个核心方法。遍历内容需要了解特定于各个浏览器的实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|997485|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/Window/localStorage^0|1W|1T|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

All of these answers ignore the differences between the implementations of localStorage across browsers.
Contributors in this domain should heavily qualify their responses with the platforms they are describing.
One browser-wide implementation is documented at 
<a href="https://developer.mozilla.org/en/docs/Web/API/Window/localStorage" rel="nofollow">https://developer.mozilla.org/en/docs/Web/API/Window/localStorage</a> and, whilst very powerful, only contains a few core methods. Looping through the contents requires an understanding of the implementation specific to individual browsers.

blocks|key|997570|text|localStorage将数据保存为键-值对，这些值可以通过函数localStorage.getItem(+key+)访问，该函数将一个键作为参数，并返回带有给定键的键值对的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997571|可以使用函数localStorage.setItem(+localStorage，value)设置值的键值对。|997572|如果您想遍历localStorage，您可以使用数字作为键。|997573|localStorage.setItem(localStorage.length,+value);|code-block|syntax|javascript|997574|通过上面的指令，您可以将一个具有升序关键字的值附加到localStorage，因为每次调用都会增加localStorage的长度。|997575|现在可以使用下面的for循环来迭代localStorage。|997576|for+(let+i+=+0;+i+<+localStorage.length;+i%2B%2B){
++console.log(localStorage.getItem(i));
}+|997577|使用"let“或"var”声明变量并不重要。两者之间的区别在于范围。如果你想知道更多关于let和var之间的区别，我推荐你tutorialspoint+(https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript)的解释。|offset|length|997578|entityMap|0|LINK|mutability|MUTABLE|url|https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript^0|0|0|0|0|0|0|0|25|23|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

The localStorage saves data as key-value pairs and the values can be accessed by the function localStorage.getItem(key), which takes a key as parameter and returns the value of the key-value pair with the given key.
The key-value pairs of the localStorage can be set with the function localStorage.setItem(key, value).
If you want to iterate through the localStorage you can use numbers as keys.
<pre class="lang-js prettyprint-override"><code>localStorage.setItem(localStorage.length, value);
</code></pre>
With this instruction above you are appending a value with an ascending key to the localStorage, because the length of the localStorage is increased by each call.
Now the localStorage can be iterated with the following for-loop.
<pre class="lang-js prettyprint-override"><code>for (let i = 0; i &lt; localStorage.length; i++){
 console.log(localStorage.getItem(i));
} 
</code></pre>
It does not matter if you use &quot;let&quot; or &quot;var&quot; to declare a variable. The difference between both is the scope. If you want to know more about the difference between let and var, I would recommend you the explanation by tutorialspoint (<a href="https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript" rel="nofollow noreferrer">https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript</a>).

blocks|key|997620|text|for+(const+[key,+value]+of+Object.entries(localStorage))+{
+++console.log(key,+value);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|997621|在这里，我们分别遍历本地存储中的每个键和值。|unstyled|997622|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>for (const [key, value] of Object.entries(localStorage)) {
 console.log(key, value);
}
</code></pre>
Here we are looping through each key and value respectively in local storage.

So, I was thinking I could just loop through localStorage like a normal object as it has a length. How can I loop through this?

<pre><code>localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');
</code></pre>

If I do a <code>localStorage.length</code> it returns <code>3</code> which is correct. So I'd assume a <code>for...in</code> loop would work.

I was thinking something like:

<pre><code>for (x in localStorage){
 console.log(localStorage[x]);
}
</code></pre>

But no avail. Any ideas?

The other idea I had was something like

<pre><code>localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');
</code></pre>

In which the <code>for...in</code> does work.

Looping through localStorage in HTML5 and JavaScript

JSON

所以，我想我可以像一个普通对象一样循环遍历localStorage，因为它有一个长度。我怎么才能遍历它呢？localStorage.setItem(1,'Lorem');localStorage.setItem(2,'Ipsum');localStorage.setItem(3,'Dolor');如果我执行localStorage.length，它会返回3，这是正确的。所以我假设for...in循

问在HTML5和JavaScript中遍历localStorage
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5和JavaScript中遍历localStorageEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5和JavaScript中遍历localStorage
EN