web-dev-qa-db-ja.com

HTML5 localStorageキーを取得する

localStorageのすべてのキー値を取得する方法を知りたいだけです。

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

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

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

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

javascripthtml5keylocal-storage
132
Simone

eS2017では次を使用できます。

Object.entries(localStorage)
4
nktshn
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 ) ) );
}
276
Kevin Ennis

このようにして、簡単に見えるオブジェクトを作成するのが好きです。

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;
}, {});
26
Zack Argyle
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
12
nerdcoder

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

8
Jeffrey Sweeney

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

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

質問ではキーの検索について言及しているので、すべてのキーと値のペアを表示するには、次のように行うことができると思いました（Kevinの答えに基づいて）：

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

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

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

4
Sean Colombo

私はケビンが最高の答えを持っていることに同意しますが、ローカルストレージに同じ値の異なるキーがある場合、たとえば、パブリックユーザーにアイテムをバスケットに追加した回数を表示させたい場合は、それらを表示する必要があります同様に何度もこれを使用することができます：

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;
}
0
Hassan Azimi

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

ES6：

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