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動作します。

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

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));

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

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

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

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

  // key magic
  // value magic

});

最終的に、次のものでオブジェクトを取得します。

JSON .parse（localStorage.getItem（localStorage.key（key）））;

これは私にとってChromeで機能します：

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

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

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

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

数値またはブール値を両方とも文字列として保存しているため、値として保存してもこれは機能することに注意してください。

これらの回答はすべて、ブラウザ間でのlocalStorageの実装の違いを無視しています。このドメインのコントリビューターは、彼らが説明しているプラ​​ットフォームを使用して、自分の応答を大幅に修飾する必要があります。ブラウザ全体の実装の1つは、https：//developer.mozilla.org/en/docs/Web/API/Window/localStorageに記載されて おり、非常に強力ですが、いくつかのコアメソッドしか含まれていません。コンテンツをループするには、個々のブラウザーに固有の実装を理解する必要があります。

localStorageですObject。

他のオブジェクトと同じように、JavaScript for / inステートメントでループすることができます。

そして.getItem()、各キー（x）の値にアクセスするために使用します。

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