【javascript】localStorageに保存したboolean値を正しく取得する

localStorageにboolean型の値を格納しようとして壁に当たった時のことです。

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

trueを保存したのにfalseが返ってきた・・・。ん、どういうこと？

保存前のlocalStorage前の変数の中身を見てもtrueの状態でした。

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

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

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

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

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

//※reactで書いています。

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

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

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

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

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

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

返すことになります。

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

自分の場合は、localStorageが便利すぎてそれに依存して他の型と同じ要領で

格納してしまったのがいけなかったみたいです。