本記事では、ローカルストレージ/セッションストレージにオブジェクトを追加する方法と追加されたオブジェクトを取得する方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
stringifyメソッドとparseメソッドを組み合わる
ローカルストレージ/セッションストレージにそのままオブジェクトを代入し取得しようとしても上手くいきません。
let personObj = {
name: "Taro",
age: 30,
gender: "male",
};
sessionStorage.setItem("person", personObj);
console.log(sessionStorage.getItem("person")); // => [object Object]
このようになってしまう原因は、ローカルストレージ/セッションストレージに保存できるデータ型は文字列と決まっているからです。この規則により、文字列以外のデータが追加された場合は自動的に文字列に変換されてしまいます。
では、どのようにしてオブジェクトをローカルストレージ/セッションストレージに保存させるのか?答えは、データを追加する時(setItem)にJSON.stringifyメソッドを使用してJSON形式に変換してからデータを保存させます。更に、データを取得する時(getItem)にJSON.parseメソッドを使用してJSON形式で保存されたデータをオブジェクトに変換させます。
let personObj = {
name: "Taro",
age: 30,
gender: "male",
};
sessionStorage.setItem("person", JSON.stringify(personObj));
let getPersonObj = JSON.parse(sessionStorage.getItem("person"));
console.log(getPersonObj.name); // => Taro