localstrageを使った機能開発

Question

実現したいこと

javascriptを用いて以下のような機能を作りたいです

localstrageを使ってものを入手したものを記録し出力し続ける機能を作りたいです
ブラウザを一旦消しても入力した内容を再度表示したいので、localstrageを使います
最初にpromptで‘’手に入ったものは”で入力し、
今まで手に入れたものは・・・のメッセージとともに過去のものも含め全て出力すします

例として、
最初に起動させて、入手したものは、という入力欄がでます
銅の剣と入力します
次に今まで入手したものはというメッセージの後に、銅の剣と出力します
この繰り返しです

localstrageに保存せずにfor文で無限ループにするやり方だとブラウザを消すと今までの分が消去されていまうのでできません

皆さんのお知恵を拝借したいです

javascript

試してみたこと

var d = [];
for (var i = 1; i > 0; i++) {
var v = prompt("入手したものは")
d.push(v);
alert("今まで入手したものは")
alert(d)
}

これだと条件は満たしますが、ブラウザを消せば消えてしまいます
localstrageに保存し続けるやり方がわからなくて困っています

Comments

[退会済みユーザー]

localstrage ではなくて localStorage ではないのですか？　質問文と表題は編集できるので訂正してください。

[退会済みユーザー]

自分で調べて以下のような記事は読んでいるんですよね？　なのにどうしてあなたのやりたいことができないのでしょうか？　どこで躓いていて何が分かれば解決するのですか？

Window.localStorage
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

[Lhankor_Mhy]

d.push(v); の後に保存して、var v = prompt("入手したものは") の前に読み込めばいいだけのように思うのですが、どのような問題が起きていますか？

[shiketa]

> 入手したものを記録し出力し続ける機能
モノゴトには上限や制限があります。だいじょぶすかね。
https://www.google.com/search?q=localstorage+%E5%AE%B9%E9%87%8F

[m.ts10806]

ログのようなものならMySQLなどのデータベースにしたほうが良いでしょうね。

Answer 1

var d = [];

このあとに、「localStorage にデータがあればそこから配列を復元して d にセットする」というコードを書きます。

d.push(v);

このあとに、「d を localStorage に保存する」というコードを書きます。

配列の復元と保存には JSON.parse() と JSON.stringify() を使うと簡単です。