【javascript】localStorageに保存したtru/false値を適切に受け取る

今回は、localstorageに保存したboolean値を適切に受け取る方法についてです。

ページを移動した際もトグルの状態を保存するためにlocalStorageを使ったのですが

trueを保存したのにfalseが返っててしまいました。

中身を調べてみてもtrueの状態でした。

https://zukucode.com/2018/03/javascript-string-boolean.htmlによると

localStorage保存時にboolean型の値は文字列に変わってしまうみたいで

その文字列に変換していた変数を取り出したために実際の値とは異なるfalse扱いの

変数が結果として返ってくるというからくりでした。

真偽値に変換する方法は、以下の通り。

const i = window.localStorage.getItem('toggle');
this.setState({ currentToggle: i.toLowerCase() === 'true' });

例えば、上記の理屈で紐解くと真偽値trueとして保存した時は文字列「”true”」として変換

されて格納されます。そこで、toLowerCase()メソッドを使って文字列が該当する文字列「”true”」

かどうかを確認します。toLowerCase()メソッドは、返り値がtrue/falseなので

文字列同士が合っていればboolean型の値を保存した時と同じ結果を返すことができます。

つまり、falseが保存された場合は「”true”」に該当しないので実質falseを

返すことになります。

このようにboolean型の値を保存したい場合にはひと加工する必要があります。

少々面倒ですが一工夫加えれば正確に値を取ることができます。