【JS】セッションストレージにオブジェクト（連想配列）を保存する方法と読み込む方法

セッションストレージは、JavaScriptで利用できるブラウザの保存領域で、ブラウザのタブを閉じたりしない限り、ページ遷移を挟んでも保存したデータを別のページで共有することができるものだ。

今回は、このセッションストレージにJavaScriptのオブジェクト（連想配列）を保存する方法と、保存したオブジェクトを読み込む方法を紹介する。

セッションストレージにオブジェクトを保存する

まず、セッションストレージにオブジェクトを保存する場合、オブジェクトをそのまま保存することはできないため、一度JSON.stringify関数でオブジェクトをJSON文字列データに変換する必要がある。

var obj = { 
  name: 'hoge', 
  age: 30 
};

sessionStorage.setItem('obj', JSON.stringify(obj));

オブジェクトの保存はこれでOK。

次は、保存したオブジェクトをセッションストレージから読み込む方法。

var obj = sessionStorage.getItem('obj');

セッションストレージに保存したデータは、getItem関数で簡単に読み込むことができるが、読み込んだデータをオブジェクトとして扱うにはもうひと手間加える必要がある。

obj = JSON.parse(obj);

console.log(obj.name);
// 出力結果: hoge

保存する際に文字列に変換したデータをJSON.parse関数でJSON形式に変換することで、元のオブジェクトとして利用することができるようなる。