はじめに
今回は、sessionStorageについて学んだことをまとめておきたいと思います。
sessionStorageの基本的な使い方について説明した後、タイトルのサンプルコードを紹介します。
1. sessionStorageとは
ページを閲覧しているユーザーのブラウザに,
key-valueの形式でデータを保存する仕組みであるWeb Storage APIの１つです。
データの保存、取得、更新、削除といった操作がJavaScriptの短いコードで実現できるため、
直感的に使うことができます。
もう一つのWeb Storage APIであるlocalStorageとの違いとしては、データの保存期間などが挙げられます。
2. 基本構文
データの保存
データの保存にはsetItemメソッドを使ってkey、valueを指定します。
//sessionStorage.setItem('key','value');
sessionStorage.setItem('name','太郎');
データの取得
データの取得にはgetItemメソッドを使ってkeyを指定します。
//sessionStorage.getItem('key');
sessionStorage.getItem('name');
データの削除
データの削除にはremoveItemメソッドを使ってkeyを指定します。
//sessionStorage.removeItem('key');
sessionStorage.removeItem('name');
データの初期化（全て削除）
データの初期化にはclearメソッドを使います。
sessionStorage.clear();
3. 本題
sessionStorageにオブジェクトを保存する
sessionStorageに保存することが出来る型は、文字列型です。
そのため、オブジェクトをJSON形式（文字列型）に変換してから保存する必要があります。
手順としては、
- JSON.stringifyメソッドを使ってオブジェクトをJSON文字列に変換
- setItemメソッドを使ってデータを保存
となります。
また、保存したデータは
- getItemメソッドを使ってデータを取得
- JSON.parseメソッドを使ってJSON文字列をオブジェクトに変換
の手順を踏むことで、オブジェクトとしてデータを利用することができます。
サンプルコード
const obj = {
name: '太郎',
hobby: 'ゲーム'
};
//オブジェクトをJSON文字列に変換
const jsonObj = JSON.stringify(obj);
sessionStorage.setItem('user', jsonObj);
const user = sessionStorage.getItem('user');
//JSON文字列をオブジェクトに変換
const userObj = JSON.parse(user);
上記のようなコードでsessionStorageにオブジェクトを保存し、利用することができました。
以上で実装完了です。
4. 参考記事