JavaScriptのsessionStorageの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのsessionStorageの使い方について現役エンジニアが解説しています。sessionStorageとは、ページのセッションが続いている間、データを保存できる領域のことです。sessionStorageで値を追加・削除する方法やlocalStorageとの違いについて解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのsessionStorageの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのsessionStorageの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

sessionStorageとは

ページのセッションが続いている間、データを保存できる領域のことです。平たく言うと、画面を開いてから閉じるまでが1つのセッションとなり、画面を閉じるまでの間、保存できる領域となります。

sessionStorageの使い方

保存するデータの形式は、JavaScriptのオブジェクトのようにキーとバリューとなっています。言い換えると、「データの名前」と「データ」という形で管理します。

主な使い方として、「保存する」「取得する」「削除する」の3つがあります。

  • 保存する場合:sessionStorageのsetItemというメソッドの第1引数にキーの名前、第2引数に保存するデータを指定する
  • 取得する場合:sessionStorageのgetItemというメソッドの第1引数にキーの名前を指定することで、保存したデータを取得できる
  • 削除する場合:sessionStorageのremoveItemというメソッドの第1引数にキーの名前を指定することで、保存したデータの削除ができる

 

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

sessionStorageとlocalStorageの違い

sessionStorageに対してlocalStorageという保存領域もあります。ほとんど同じで、保存や取得や削除などが同じ名前のメソッドで操作できます。違いは、保存する期間と範囲です。

sessionStorageはそのタブだけで有効で、タブを閉じたら消えます。localStorageはタブが異なっても有効、かつ、ウインドウを閉じても有効です。

データを使う期間や複数のタブで使うかどうかで適宜使い分けてください。

実際に書いてみよう

sessionStorageはJavaScriptのWindowインターフェースのプロパティです。つまり、Windowは省略可能なので、sessionStorageと記述するだけで使用できます。

よく使う保存と取得と削除の例を紹介します。「loginUser」というキーで「テックアカデミージュニア」という文字列を保存して、取得と削除をしています。

//データを保存
sessionStorage.setItem('loginUser', 'テックアカデミージュニア');

//データを取得
var data = sessionStorage.getItem('loginUser');
console.log(data);  //テックアカデミージュニア と表示される

//データを削除
sessionStorage.removeItem('loginUser');

 

まとめ

画面を更新してもデータが残るので、ページの移動など変数だけでは状態を保持できない場合に必要になります。

複数のページをまたぐような処理ができると、ユーザーの状態を保持し表示をコントロールしたりとプログラムの幅が広がりますのでお試しください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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