HTML5 localStorageキーを取得する


145

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


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

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

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


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




このループはなぜi = 1で始まり、i = localStorage.lengthで終わるのですか?私がテストしたブラウザ(クローム)では、ループがlocalStorage.lengthで0と最後に開始する必要があります- 1 ...
ルイLC

@LouisLC(リレーショナルデータベースの主キーのように)にキーにプログレッシブ番号を使用していたため。
Simone

回答:


35

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

Object.entries(localStorage)

5
そして、私Object.keys()も期待どおりに動作すると思いますか?

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

このリンクでは.... stackoverflow.com/questions/15313606/… ...なぜこれらすべての奇妙なメソッドを使用してlocalStorageにアクセスしているのですか?

2
「最も安全な」コードに関するいくつかの質問:1)宣言localStorage.lengthして直接使用しないのはなぜですか?2)なぜforループ内で宣言するのですか?3)なぜ++i好まれますかi++
Luciano Bargmann、2014

8
実際に試してみましたか?++iほとんどの場合、ループはから始まりませんi = 1。括弧内の3番目の式は各反復後に評価さます。i++との++i両方にまったく同じ影響がありiます。違いは、増分後++i新しい値に評価されるのiに対し、増分i++の値に評価されることです。ここで問題になるのは、式の値ではなく、増分の副作用だけなので、ここではまったく違いはありません。i i
Kevin Ennis 14年

33
Object.keys(localStorage)IE <9をサポートする必要がない限り、今日はこのシナリオで完全にうまく機能することは注目に値します
Adrian

2
また、キー自体の名前を表示したい場合は、localStorage.key( i )パーツを使用して表示できることにも注意してください。
ショーンコロンボ

29

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

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

1
オブジェクトを反復するそのスタイルが好きです。
ジョナサンステルワグ2018

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


7

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

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

またnew Array(this.localStorage.length).fill(0)、apply imoを使用するよりも少しハックが少ないと感じることもできます。
レニー

6

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

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

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

(ケビン:必要に応じて、この情報を回答に取り入れてください!)


1

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

ES6:

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

1

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

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}

0

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

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

-1

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

@Darkrum Firefoxは仕様に正しく従っているので、key、getItem、およびsetItemを使用すると欠落しますobject.keys()...これを反映するように回答を更新します。
マイクラトクリフ2018

ローカルストレージの仕様を読んでください。あなたの言ったことはわかりません。
Darkrum

そして、object.keys()の仕様を読んで、Firefoxがあなたの言うことが真実であるならばそれを許していないように見えるように見えます。
Darkrum

@Darkrumhtml.spec.whatwg.org/ multipage /…を見てください[Exposed=Window]。仕様でIDLがで定義されていることがわかります。これにより、私が説明する動作が行われます。それを指定した場合、[Exposed=Window,OverrideBuiltins]期待どおりの動作が得られますが、仕様で指定されていませんOverrideBuiltinswhatwg
Mike Ratcliffe

繰り返しになりますが、これはobject.keysの動作には関係ありません。Mozillaが設定を許可しないのは、仕様をどのように解釈したかです。他の手段で特別に変更しない限り変更できないプロトタイプは独自のプロパティと何か関係があるため、Googleは明らかにそれが何をしているのかを知っていました。
Darkrum

-3

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

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

localStorage.setItem('user', user_Detail);

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

localStorage.getItem('user');

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.