ローカルストレージがうまくいかない

質問

ローカルストレージを使って変数内のテキストを、保存してリロードしても削除するまで残るようにしたいのですがうまくいきません。

変数を指定してもダメで、テキストしか入れられないと聞いたのですがそうなのでしょうか？
下記のようにしても残ってくれません。
変数の中身を残すにはどうしたらいいでしょうか。

localStorage.getItem("onePrice");

var onePriceResult = document.getElementById('onePriceResult').innerHTML = あああ';
localStorage.setItem("onePrice", onePriceResult);

回答No.1

Proof4 · ベストアンサー

onePriceResultの変数定義で「あああ」が正しくクオーテーションで囲まれていないのが問題ではないでしょうか。

var onePriceResult = document.getElementById('onePriceResult').innerHTML = 'あああ';
localStorage.setItem("onePrice", onePriceResult);
で保存できます。

できますが、基本的に変数定義で=を二つ使うことは実用上しないことだと思います。

お礼

サンプルなのでそうなっていますが実際は下記のように問題なくできています。

document.getElementById('onePriceResult').innerHTML = 変数名+ 'です。';

するとローカルストレージは文字列しか保存できないというわけではなく変数も保存できるのですね。

ちゃんと保存できているのになぜかリロードすると初期化されて、DOM生成した、要素とその中に入れたテキストがなくなってしまいます。

localStorage.getItem("onePrice");
とすればリロード時に保存したhtmlとその中身のテキストが読み込まれて表記され、リロード前の状態が再現されるのではないでしょうか？

もしかして
var onePriceResult = document.getElementById('onePriceResult').innerHTML = 'あああ';
のように一つの式に二つイコールを使ってはいけない仕様なのでしょうか？
ここがうまくいっていないのですか？

補足

やっとできましたありがとうございます。

回答No.3

Proof4

No.2のお礼コメントに対して
>localStorage.getItem("onePrice");を変数に入れて、
>その後変数をinnerHTMLに入れてやれば始めに保存した変数の中身が表記されると考えてよいでしょうか？
その通りです

お礼

すると変数だけでは表記するｐタグがないので、
これもcreateelementで作ってやる必要がありそうですね

回答No.2

Proof4

No.1の補足に対して回答します。

>するとローカルストレージは文字列しか保存できないというわけではなく変数も保存できるのですね。
変数を保存するというよりも変数をキーとして「変数の値」を保存するといったほうが正しいです。

>localStorage.getItem("onePrice");
>とすればリロード時に保存したhtmlとその中身のテキストが読み込まれて表記され、リロード前の状態が再現されるのではないでしょうか？
localStorage.getItem("onePrice");ではローカルストレージから値をただ読み込むだけですのでそれだけで何かを表示してくれることはありません。
何らかのDOM要素を指定するなりして表示させなければなりません。

>一つの式に二つイコールを使ってはいけない仕様なのでしょうか？
実用上使わないというのは語弊がありました。

お礼

localStorage.getItem("onePrice");を変数に入れて、
その後変数をinnerHTMLに入れてやれば始めに保存した変数の中身が表記されると考えてよいでしょうか？