本記事では、ローカルストレージ/セッションストレージにオブジェクトを追加する方法と追加されたオブジェクトを取得する方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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
