sessionStorage

セッションとは

セッションとは、広義のコンピューター用語で「一連の処理のはじまりから終わり」を示す概念のことを言います。

例えば、Webサイトにアクセスしてそのページから出るという一連の処理があった場合、これを1つのセッションとして考えることができます。

通常の場合、ECサイトにログインして商品を買い物リストに追加し、購入ボタンを押すといった処理があれば、画面が切り替わるごとにセッションがリセットされ、ユーザーがログインした情報などが失われてしまいます。

そこで今回紹介する、狭義の意味でのsession（セッション）とCookie（クッキー）という仕組みを使えば、PHPでユーザー情報をWebサーバーに保持し、上記の処理を一連のものとして扱えるようになります。

Cookieもsessionも使い道は似ていますが、Cookieはクライアント側に情報が保存されるのに対し、sessionはサーバー側に情報が保存されるという違いがあります。

Cookieはクライアント側（ブラウザ）に情報が保存される上に、ブラウザを操作すれば保持された個人情報を盗み見ることもできるため、重要な情報を保存するのには向いていません。

sessionはCookieのように保存期間を決めることができず、「Webブラウザを閉じるまでしか情報を保持できない」という制限が存在しますが、その分Cookieに比べ安全に情報を保存することができます。

sessionStorage

sessionStorageは、Webページのセッションが続いている間、情報を保存しておけるブラウザの保存領域のようなものです。

通常JavaScriptで保持されている変数などの情報は、ページを再読み込みするとリセットされます。

sessionStorageを使うと、ページを閉じてもそのブラウザウィンドウ、もしくはタブを閉じない限り、情報を保持し続けることができます。

保存するデータの形式は、JavaScriptのオブジェクトのようにキーと値の組み合わせになっています。

言い換えると、「データの名前」と「データ」という形で管理します。

今回は、sessionStorageの使い方として「保存する」「取得する」「削除する」の3つを解説します。

sessionStorageにデータを保存する

sessionStorage.setItem('キー', '値')

sessionStorageはJavaScriptの組み込みオブジェクトであるため、何も定義しなくてもsessionStorageと記述すればアクセスできます。

データを保存するには、setItemメソッドにキーと値を指定します。

上記のコードを実行した際、指定されたキーが存在しなければ新規に作成し、すでに存在していれば既存の値を上書きします。

sessionStorageのデータの値には文字列しか指定できない点に留意しましょう。

sessionStorageからデータを取得する

sessionStorage.getItem('キー')

データを取得するには、getItemメソッドの引数に取得したいデータのキーを指定します。

setItemメソッドと対になるメソッドとして覚えてしまいましょう。

sessionStorageからデータを削除する

sessionStorage.removeItem('キー')

データの削除にはremoveItemメソッドを使います。

getItemと同様、引数に削除したいデータのキーを指定します。

使用しなくなったデータを明示的に削除することで、データの混在を防ぐとともにsessionStorageの領域を無駄にしないようにしましょう。