HTML5 localStorageキーを取得する

すべてのキー値を取得する方法を考えているところです localStorage。

単純なJavaScriptループで値を取得しようとしました

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

ただし、キーが1から始まるプログレッシブ番号の場合にのみ機能します。

使用可能なすべてのデータを表示するために、すべてのキーを取得するにはどうすればよいですか？

ES2017では、以下を使用できます。

Object.entries(localStorage)

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

私はこのようにそれから簡単に見えるオブジェクトを作成するのが好きです。

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;
}, {});

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

localStorage.key(index)関数を使用して文字列表現を返すことができindexます。は、取得するn番目のオブジェクトです。

ブラウザがHTML5 LocalStorageをサポートしている場合は、Array.prototype.mapも実装して、これを有効にする必要があります。

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

質問はキーを見つけることについて述べたので、すべてのキーと値のペアを表示するには、次のように行うことができます（ケビンの回答に基づく）。

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

これは、「key：value」の形式でデータを記録します

（ケビン：必要に応じて、この情報を回答に取り入れてください！）

これにより、すべてのキーと値がlocalStorageに出力されます。

ES6：

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

次のようなキーと値を取得できます。

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${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));
}

名前で読むこともできます。

このように「user」という名前で値を保存したとしましょう

localStorage.setItem('user', user_Detail);

次に、それを使用してそれを読むことができます

localStorage.getItem('user');

私はそれを使用し、それはスムーズに機能しています、forループを実行する必要はありません