Local Storageに入れたデータが上手く判定できなかった話

Local Storageに入れたデータを使って条件判定したい

• JavaScriptでを使ってLocal Storageにデータを入れて条件判定に利用
• データはJSON.stringify()メソッドとJSON.parse()メソッドをつかって出し入れ
  以上の条件で作業を行っていた。

Local Storageから取り出した値で判定できない！

「Local Storage内の 'option' の値が 'default' のとき」という条件を書くため、以下のようなコードで一旦動かしてみた。

JavaScript

const value = localStorage.getItem('option');
if(value !== null && value === "default"){
    //処理   
}

ただ、これだとif文の中に入ることができず、「ちゃんと値設定しているのになんでだ？」と小一時間悩んでしまっていた。

エスケープ処理してみた

結果的には以下のように書き換えることで、解決できた。

JavaScript

const value = localStorage.getItem('option');
if(value !== null && value = "\"default\""){
    //処理   
}

その時は「ええいままよ」という感じでエスケープ処理を書いたら動いた！となってそのままにしていたのだが、原因を辿ってみるとsetItem時に原因があることがわかった。

Local Storageへの保存方法

Local Storageの特徴として以下が挙げられる。

• Local Storageは仕様上「文字列」しか保存できない

しかし、文字列だとデータが扱いにくいため、本来JSONとして保存したい。
そのため、以下のように出し入れすることも多い。

JavaScript

let storage = localStorage;
let value =  { name: 'りんご', price: 150 };
storage.setItem('option', JSON.stringify('value')); //setData
let data = JSON.parse(storage.getItem('option'); //getData
console.log(data.name); //　出力結果：りんご

基本的には上記のようにオブジェクトのような形で値を保存するため、上記の 'setData' 部分を以下のように関数として使い回していた。

JavaScript

function setData(key, value){
    let storage = localStorage;
    storage.setItem('key', JSON.stringify('value'));
}

実際に行った処理

これで文字列しか保存できないLocal Storageでもデータが扱いやすくなるのだが、ここに原因があった。具体的には以下のようデータを格納していた。

JavaScript

setData('option', 'default');

実はこの状態だと、値「default」がJSON.stringifyによって「"default"」として格納され、「dufault」で判定を行ってもマッチしなかったというわけ。

関数を使う時は、戻り値を確認しろ

結局のところ、自分で作った関数を理解していなかったというのが原因だが、ついつい使い回してしまって、実際にどんな形で出力されているのか、ということを忘れがち。

• 「文字列」⇔「JSON」の変換は、実際の文字列を意識する
• 似たような処理でも、関数を使いまわせるかはしっかり確認する

この辺りを意識しないとなあと再確認させられた。