web-dev-qa-db-ja.com

HTML5およびJavaScriptのlocalStorageをループする

そのため、長さがあるため、通常のオブジェクトのようにlocalStorageをループするだけでよいと考えていました。これをどのようにループできますか？

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

localStorage.lengthを実行すると、3が返されますが、これは正しいです。したがって、for...inループが機能すると想定します。

私は次のようなものを考えていました：

for (x in localStorage){
    console.log(localStorage[x]);
}

しかし、役に立たない。何か案は？

私が持っていた他のアイデアは次のようなものでした

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

for...inは機能します。

javascripthtml5loopsobjectlocal-storage
75
Oscar Godson

key メソッドを使用できます。 localStorage.key(index)はindexthキーを返します（順序は実装定義ですが、キーを追加または削除するまで一定です）。

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

順序が重要な場合は、JSONシリアル化された配列を保存できます。

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

ドラフト仕様では、 構造化クローン をサポートするオブジェクトは値にできると主張しています。しかし、これはまだサポートされていないようです。

編集：配列をロードするには、配列に追加してから保存します：

var words = JSON.parse(localStorage.getItem("words"));
words.Push("hello");
localStorage.setItem("words", JSON.stringify(words));
124
Matthew Flaschen

他のすべての回答に加えて、jQueryライブラリの $。each関数 を使用できます。

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

最終的に、オブジェクトを取得します：

[〜＃〜] json [〜＃〜]。parse（localStorage.getItem（localStorage.key（key）））;

22
miksiii

最も簡単な方法は次のとおりです。

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});
17
Putra Ardiansyah

これはChromeで動作します：

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}
8
jtblin

これらの回答はすべて、ブラウザ間でのlocalStorageの実装の違いを無視しています。このドメインの貢献者は、記述しているプラ​​ットフォームで回答を大幅に限定する必要があります。ブラウザー全体の実装の1つは https://developer.mozilla.org/en/docs/Web/API/Window/localStorage に文書化されており、非常に強力ですが、いくつかのコアメソッドのみが含まれています。コンテンツをループするには、個々のブラウザーに固有の実装を理解する必要があります。

1
StarTraX

ここで前の答えに基づいて構築されたのは、キー値を知らなくてもキーによってローカルストレージをループする関数です。

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

コンソール出力を調べると、コードによって追加されたすべてのアイテムがtypeof文字列を持っていることがわかります。組み込みアイテムは、関数{[ネイティブコード]}であるか、lengthプロパティの場合は数値です。 typeofKey変数を使用して、文字列のみをフィルタリングし、アイテムのみが表示されるようにすることができます。

これらは両方とも文字列として保存されるため、値として数値またはブール値を保存する場合でも機能します。

1
Steve Isenberg