- SessionStorageとは?
sessionStorageは Web Storage API の一部で、キーと値のペアでデータを保存できる仕組みです。
このデータは「ブラウザのタブを閉じる」または「ブラウザ自体を終了する」タイミングで 自動的に削除 されます。
localStorageとの違いとして、sessionStorageの特徴は以下の通りです:
タブ間で共有されない(別タブでは使えない)
タブを閉じると消える(セッション単位)
保存容量に制限がある(多くのブラウザでは約5MB) - sessionStorageの使い方
データの保存: sessionStorage.setItem(‘username’, ‘田中’);
データの取得: const user = sessionStorage.getItem(‘username’);
結果表示:console.log(user); 結果: “田中” - removeItem()によるデータの削除
特定のデータが不要になった場合、removeItem() を使ってそのキーを削除できます。
sessionStorage.removeItem(‘username’);
このコードを実行すると、キー ‘username’ に紐づくデータはメモリから削除されます。
その後に getItem(‘username’) を実行しても、戻り値は null になります。
全てのデータを削除したい場合は clear() を使用します:
sessionStorage.clear();
clear() は保存されている 全てのキーと値を削除 するため、慎重に使いましょう。 - sessionStorageはどんな時に使うべき?
sessionStorage は、一時的なデータ保存 に非常に適しています。以下のようなケースが代表的です:
ユーザーインターフェースの状態保存
送信前のフォームデータの一時保存
一時的なトークンやフラグの保存
一方で、パスワードや個人情報など機密性の高いデータの保存には不向きです。 - まとめ
sessionStorage は、フロントエンドで手軽に使える クライアントサイドの一時的なデータ保存方法 です。
removeItem() を使えば、不要なデータをピンポイントで削除することができ、柔軟かつ安全に管理できます。
ユーザー体験を向上させるために欠かせない、便利なWeb APIの一つです!