はじめに

Webアプリケーションを開発していると、ユーザーごとに一時的な情報を保存する必要が生じる場合があります。そこで活躍するのがsessionStorageです。本記事では、sessionStorageの基本的な機能や使用方法、注意点についてまとめてみようと思います。

SessionStorageとは

sessionStorageは、ブラウザ上でタブやウィンドウ単位でデータを保存できる仕組みです。
localStorageとの大きな違いは、sessionStorageに保存されたデータは、ブラウザのタブまたはウィンドウが閉じられると自動的に削除される点にあります。
使用用途としては、異なるページ間でユーザーの選択情報を一時的に保持する(ユーザーがフォームを入力していく際に誤って、前のページに戻ってしまっても入力情報を記録する)といった例が挙げられます。

基本的な使い方

1. データの保存

sessionStorageにデータを保存するには、setItemメソッドを使用します。

// キー「username」に値を保存
sessionStorage.setItem('username', 'hoge');

2. データの取得

保存したデータを取得するには、getItemメソッドを使用します。

// キー「username」の値を取得
const username = sessionStorage.getItem('username');
console.log(username); // 出力: hoge

3. データの削除

特定のデータを削除するには、removeItemメソッドを使用します。

// キー「username」のデータを削除
sessionStorage.removeItem('username');

4. セッション全体のクリア

全ての保存データを一括で削除する場合は、clearメソッドを使用します。

// セッション内の全データを削除
sessionStorage.clear();

注意点

・sessionStorageに保存されたデータは、ブラウザのタブまたはウィンドウが閉じられると削除されてしまう
・session storageに保存した情報は簡単に取られてしまうので、機密情報を保存しては行けない

まとめ

sessionStorageは、一時的なデータの保存に非常に便利なAPIです。
フォーム入力の一時保存、あるいはページ間でのデータ受け渡しの際にとても便利なものになります。ですが、簡単に情報を抜き取られてしまうため、使用には注意が必要です。