すべてのキー値を取得する方法を考えているところです localStorage
。
単純なJavaScriptループで値を取得しようとしました
for (var i=1; i <= localStorage.length; i++) {
alert(localStorage.getItem(i))
}
ただし、キーが1から始まるプログレッシブ番号の場合にのみ機能します。
使用可能なすべてのデータを表示するために、すべてのキーを取得するにはどうすればよいですか?
すべてのキー値を取得する方法を考えているところです localStorage
。
単純なJavaScriptループで値を取得しようとしました
for (var i=1; i <= localStorage.length; i++) {
alert(localStorage.getItem(i))
}
ただし、キーが1から始まるプログレッシブ番号の場合にのみ機能します。
使用可能なすべてのデータを表示するために、すべてのキーを取得するにはどうすればよいですか?
回答:
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 ) ) );
}
localStorage.length
して直接使用しないのはなぜですか?2)なぜforループ内で宣言するのですか?3)なぜ++i
好まれますかi++
?
++i
ほとんどの場合、ループはから始まりませんi = 1
。括弧内の3番目の式は、各反復後に評価されます。i++
との++i
両方にまったく同じ影響がありi
ます。違いは、増分後++i
の新しい値に評価されるのi
に対し、増分前i++
の値に評価されることです。ここで問題になるのは、式の値ではなく、増分の副作用だけなので、ここではまったく違いはありません。i
i
Object.keys(localStorage)
IE <9をサポートする必要がない限り、今日はこのシナリオで完全にうまく機能することは注目に値します
localStorage.key( i )
パーツを使用して表示できることにも注意してください。
私はこのようにそれから簡単に見えるオブジェクトを作成するのが好きです。
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;
}, {});
localStorage.key(index)
関数を使用して文字列表現を返すことができindex
ます。は、取得するn番目のオブジェクトです。
質問はキーを見つけることについて述べたので、すべてのキーと値のペアを表示するには、次のように行うことができます(ケビンの回答に基づく)。
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}
これは、「key:value」の形式でデータを記録します
(ケビン:必要に応じて、この情報を回答に取り入れてください!)
私はケビンに同意します。彼は最善の答えを持っていますが、同じ値を持つローカルストレージに異なるキーがある場合、たとえば、パブリックユーザーがアイテムをバスケットに追加した回数を表示して、それらを表示する必要がある場合があります。回数だけでなく、これを使用できます:
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;
}
Object.keys(localStorage)
...の使用について言及している人にとっては、Firefoxでは機能しないためです(皮肉にも、Firefoxは仕様に忠実であるため)。このことを考慮:
localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")
key、getItemおよびsetItemはプロトタイプのメソッドであるため、Object.keys(localStorage)
のみが返され["key2"]
ます。
あなたはこのようなことをするのが最善です:
let t = [];
for (let i = 0; i < localStorage.length; i++) {
t.push(localStorage.key(i));
}
object.keys()
...これを反映するように回答を更新します。
[Exposed=Window]
。仕様でIDLがで定義されていることがわかります。これにより、私が説明する動作が行われます。それを指定した場合、[Exposed=Window,OverrideBuiltins]
期待どおりの動作が得られますが、仕様では指定されていませんOverrideBuiltins
。whatwg