[解決済み] 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));
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTML5 の localStorage キーを取得する
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?