【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】ローカルストレージ/セッションストレージにオブジェクトを追加・取得する方法

本記事では、ローカルストレージ/セッションストレージにオブジェクトを追加する方法と追加されたオブジェクトを取得する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著: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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次