1. ホーム
  2. javascript

[解決済み] HTML5とJavaScriptでlocalStorageをループする

2022-10-10 02:08:49

質問

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 というメソッドがあります。 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"]));

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

EDIT: 配列を読み込むには、配列に追加してから、格納します。

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));