このエントリーが役に立ったらシェアをお願いします!

javascriptでセッション?HTML5 SessionStorageの使い方

このエントリーが役に立ったらシェアをお願いします!

今回は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を使い分けていきましょう!

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

javascriptでセッション?HTML5 SessionStorageの使い方
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!