目次
sessionStorageとは
sessionStorageは、Webページのセッションが続いている間、情報を保存しておけるブラウザの保存領域のようなものです。
通常JavaScriptで保持されている変数などの情報は、ページを再読み込みするとリセットされますが、sessionStorageを使うことで、ページを閉じてもそのウィンドウ、もしくはタブを閉じない限り、情報を保持し続けることができます。
例えば複数ページにわたるサイトのシステム構築の際、あるページでユーザーが入力した文字列などを別のページで取得して表示させたいなど、
ページ遷移する際に、通信はしたくないけど前のページの情報を持っていたい場合などに使うことができます!
sessionStorageの使い方
sessionStorageはJavaScriptの組み込みオブジェクトであるため、特別なライブラリなどを読み込む必要はありません。
保存するデータは、JavaScriptのオブジェクトのようにキーと値の組み合わせになっています。
今回は、sessionStorageの使い方として「保存する」「取得する」「削除する」「初期化(全データの削除)」の4つを解説します。
データを保存する
データを連想配列のようにkeyとvalueのセットで保存します。
データを保存するときはsetItemメソッドを使います。
指定されたキーが存在しなければ新規に作成し、すでに存在していれば既存の値を上書きします。
また、sessionStorageのデータの値には文字列のみ指定することができます。
保存したデータを取得する
データを取得するには、getItemメソッドの引数に取得したいデータのキーを指定します。
データを削除する
sessionStorageに保存したデータを削除する時はremoveItemメソッドを使ってkeyを指定します。
保存したデータをすべて削除する
sessionStorageに保存したデータを全て削除する時はclearメソッドを使います。
応用編
オブジェクトデータを保存し、取得する
オブジェクトを一度文字列に変換してからsessionStorageに保存し、取得後にオブジェクトに戻すことで、オブジェクトでのデータのやり取りを実現しています。
配列を保存し、取得する
配列の場合はjoinメソッドを使って、配列をカンマ区切りの文字列に変換しています。
取得した文字列はカンマ区切りなので、splitメソッドでカンマを区切り文字として配列にすることで、元の配列を復元できます。
まとめ
今回はsessionStorageについて解説ました。
sessionStorageを使うと、サーバサイドを介さずにちょっとしたデータの保持をすぐに実装することができるため、フロント主体の開発など、色々な場面で役に立つのではないかと思います。
最後までお読みいただきありがとうございました。