SessionStorage

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