今回はHTML5のSessionStorageをご紹介します。今までjavascriptからSessionを直接触ることはできず、フロントエンドで一時的にデータを保存する方法はcookieしかありませんでした。HTML5からはLocalStorageやSessionStorageを使うことでフロントでデータを保持することが可能になっています。
localStorageの使い方はこちら → クッキーはもう古い!?HTML5 localStorageの使い方
SessionStorageとは
SessionStorageとはWebStorageの一種で、javascriptを用いてクライアント側にデータを保存する仕組みです。ユーザのローカルへデータを保存することができるのはLocalStorageと同じですが、データの有効期限が異なります。LocalStorageでは半永久的にデータを保持できるのに対し、SessionStorageはウィンドウやタブを閉じるまでしか保持できません。そのため、サーバで使われるセッションと同じように、作業途中のデータや画面遷移時の一時的なデータ保存などに有効活用できます。
SessionStorageの使い方
使い方はlocalStorageとほぼ同じです。sessionStorageはブラウザが対応していればすぐに利用することができます。
ブラウザの対応チェック
LocalStorageと同様にWebStorageはHTML5で追加されたAPIなので、古いブラウザだと対応していない場合があります。
SessionStorageが使える状態にあるかをチェックして処理を分けましょう。
if(('sessionStorage' in window) && (window.sessionStorage !== null)) {
// セッションストレージが使える
} else {
// 使えない。。。
}
SessionStorageへデータを保存する
var num = 1;
// データの保存
sessionStorage.setItem('access_count', num);
window.sessionStorage.setItem('access_count', num);
sessionStorage.access_count = num
SessionStorageからデータを取得する
// データの取得
num = sessionStorage.getItem('access_count');
num = window.sessionStorage.getItem('access_count');
num = sessionStorage.access_count
SessionStorageからデータを削除する
// データの削除
sessionStorage.removeItem('access_count');
window.sessionStorage.removeItem('access_count');
SessionStorageの初期化
// データを削除 sessionStorage.clear(); window.sessionStorage.clear();
まとめ
SessionStorageを使うことでサーバを介さずにセッションと同じ仕組みを利用することができます。一時的にクライアント側でデータを保持させることができるので、使い捨てのデータを扱うにはSessionStorageを使うのが良いと思います。LocalStorageでは半永久的にデータを保持することができるので、処理に応じてSessionStorageとLocalStorageを使い分けていきましょう！
コメント