ローカルストレージがうまくいっていない気がします。

質問

ローカルストレージがうまくいっていない気がします。

計算をした結果11という数値をローカルストレージに保存したい。

var storageResult1 = localStorage.setItem("storageResult1", getStrageResult1);
をインスペクタで見ると下記のようになります。

storageResult1=undefined
getStrageResult1=11

数値のローカルストレージへの保存まではうまくいってそうですが、
ローカルストレージの作成がうまくいっていないように思うのですがキーがundefinedになるのはうまくいかなかったときの値ですか？

もしそうなら何が考えられるでしょうか？

回答No.2

t_ohta · ベストアンサー

＞　変数と同じでローカルストレージがsetItemで定義されていないのにgetItemしようとすると、変数と同じように、undefinedになり、それ以降のソースは一切実行されなくなってしまうということでしょうか？

ローカルストレージの定義が無い状態で getItem() した時は null が返って来るのでエラーにはなりません。

＞　var storageResult1 = localStorage.setItem("storageMyCalc1", getStrageResult1);

これは storageResult1 に setItem() の結果を入れようとしているので undefined が storageResult1 に入ります。

＞　ただ初めての訪問ではgetItemせずにボタンを押してローカルストレージが作られていた時だけ読み込み時にgetItemするなんてどのような条件式にすればいいのでしょうか？

書かれているプログラムでは getStorageResult1 変数の中身を書き換える場所が無いので何度やっても null しか入りません。
どこかで変数の中身を書き換えているのであれば、再読込すると最初の getItem() の結果には保存した値が入っているはずです。

お礼

ありがとうございます。

ローカルストレージの定義が無い状態で getItem() した時は null が返って来るのでエラーにはならないが、

getStrageResult1という変数が未定義なので、この変数がundefinedになり、このundefinedがローカルストレージ内に入ってしまい、結果的にローカルストレージを代入している変数内にundefinedが入ってしまうということでしょうか？

するとstorageResult1変数をこのgetItemの前に宣言しないといけないということですかね？

補足

https://codepen.io/anon/pen/BVzRLq
全体をお見せするとこのようになっています。

＞＞＞
書かれているプログラムでは getStorageResult1 変数の中身を書き換える場所が無いので何度やっても null しか入りません。

このgetStorageResult1 変数とはgeItemをしているローカルストレージの引数のgetStorageResult1 変数に値をinnerHTMLなどで入れる作業がないので常に空になり、nullが入ることになるということでしょうか？

ただundefinedとは関係がなく、かつ個々のエラーで止まる現象とは全くベルの問題で関連はないという認識でよいでしょうか？

回答No.1

t_ohta

undefined は変数が定義されていない時に出ます。
localStorage.setItem() 自体は戻り値が無いので undefined になっているんじゃないかと思います。

localStorage.setItem("storageResult1", getStrageResult1);
var storageResult1 = localStorage.getItem("storageResult1");
console.log(storageResult1);

とすればローカルストレージに値がセットされ、取り出せることが確認できると思います。

お礼

ありがとうございます。

下記のようにしているので、初めて訪問した時は確かにまだローカルストレージが定義されていません。
変数と同じでローカルストレージがsetItemで定義されていないのにgetItemしようとすると、変数と同じように、undefinedになり、それ以降のソースは一切実行されなくなってしまうということでしょうか？

var getStorageResult1 = localStorage.getItem("storageMyCalc1");

document.getElementById('js-myBtn1').addEventListener('click', function() {

// 引数のキー名のローカルストレージを作成
var storageResult1 = localStorage.setItem("storageMyCalc1", getStrageResult1);
});

ただ初めての訪問ではgetItemせずにボタンを押してローカルストレージが作られていた時だけ読み込み時にgetItemするなんてどのような条件式にすればいいのでしょうか？