JavaScriptでセッションの情報を管理する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでセッションの情報を管理する方法について現役エンジニアが解説しています。セッションはブラウザ側でデータを一時保存できる機能のことでHTML5からsessionStorageとlocalStorageが追加されました。cookieとの違いなどについて確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでセッションの情報を管理する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでセッションの情報を管理する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

セッションとは

フロント側でデータを一時保存できる機能のことを言います。

HTML5以前ではcookieのみで一時保存を行うしかありませんでしたがHTML5になってから、LocalStorageとSessionStorageのsession機能が追加されました。

 

JavaScriptでセッションの情報を管理する方法

セッション管理についてはcookieとsessionで異なりますが、それぞれの管理・操作方法をお伝えしていきます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

sessionStorageによる方法

JavaScriptでSessionStorageを管理するには、以下の数種類の方法で管理することができます。

  • SessionStorageが使用可能かどうか判定する
  • SessionStorageへデータを保存する
  • SessionStorageからデータを取り出す
  • SessionStorageのデータを削除する
  • SessionStorageの初期化(全削除)をする

の方法で管理・操作することが可能です。

 

cookie操作による方法

cookieへの操作は以下の方法で行うことができます。

  • document.cookieに対して’名前=値’の型で書き込む
  • セミコロン(;)、カンマ(,)、空白を含めることができないので、encodeURIComponent()を使用してエンコードする
  • data = document.cookie でセミコロンで区切られた’名前=値’の型が返却される
  • 「有効期限に過去の日付を入れる」もしくは「空の値をセットする」ことで削除できる

 

実際に書いてみよう

実際にSessionStorageの操作を行ってみます。

 

SessionStorageが使用可能かどうか判定する

if(('sessionStorage' in window) && (window.sessionStorage !== null)) {
// ストレージ使用可能
} else {
// ストレージ使用不可
}

 

SessionStorageへデータを保存する

// データの保存
sessionStorage.setItem('session_save', 1);
window.sessionStorage.setItem('session_save', 1);
sessionStorage.session_save = 1;

 

SessionStorageからデータを取り出す

// データの取得
get_storage = sessionStorage.getItem('session_save');
get_storage = window.sessionStorage.getItem('session_save');
get_storage = sessionStorage.session_save;

 

SessionStorageのデータを削除する

// データの削除
sessionStorage.removeItem('session_save');
window.sessionStorage.removeItem('session_save');

 

SessionStorageの初期化(全削除)をする

// データを削除
sessionStorage.clear();
window.sessionStorage.clear();

 

以上が、SessionStorageの使用方法についての解説になります。

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。