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

SessionStorage HTML5

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

HTML5javascript
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!
イケてないコード – Webエンジニアのブログ

コメント

タイトルとURLをコピーしました