はじめに
localStorageでオブジェクトを読み書きしたいときの基本構文を備忘録としてまとめました。
環境
OS: macOS Catalina 10.15.1
Chrome: 78.0.3904.108（Official Build） （64 ビット）
Firefox: 71.0(64ビット)
1.公式での使用例
まずは公式で紹介されている使用例です。
１つのキーに対し、１つのスカラー値を読み書きする例となっています。
sample.js
// 書き込み
localStorage.setItem('myCat', 'Tom');
// 読み込み
let cat = localStorage.getItem("myCat");
// 削除
localStorage.removeItem("myCat");
ただ、これは以下のように、オブジェクトでは使えません。
sample.js
let object = {
key1: "name1",
key2: "name2"
};
localStorage.setItem("myObject", object);
一見大丈夫そうでも...
↓
"[object Object]"
出力はこうなってしまいます。
localStorageにオブジェクトを突っ込みたい方も多いのではないでしょうか？
次はオブジェクトで使うための基本構文です。
2.オブジェクトを読み書きするときの基本構文
問題は、JavaScriptオブジェクト⇔JSON文字列の変換が行われていなかったことです。
sample.js
let object = {
key1: "name1",
key2: "name2"
};
// 書き込み ※JavaScriptオブジェクト -> JSON文字列に変換
localStorage.setItem("myObject", JSON.stringify(object));
// 読み込み ※JSON文字列 -> JavaScriptオブジェクトに変換
JSON.parse(localStorage.setItem("myObject"));
// 削除 ※変わらず
localStorage.removeItem("myObject");
これで無事、localStorageを使ってオブジェクトを読み書き出来るようになりました！
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです