JavaScriptのsessionStorageの使い方を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのsessionStorageの使い方について現役エンジニアが解説しています。sessionStorageとは、ページのセッションが続いている間、データを保存できる領域のことです。sessionStorageで値を追加・削除する方法やlocalStorageとの違いについて解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
JavaScriptのsessionStorageの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- sessionStorageとは
- sessionStorageの使い方
- sessionStorageにオブジェクトや配列を保存したい場合
- sessionStorageとlocalStorageの違い
- ブラウザ対応状況
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptのsessionStorageの使い方について詳しく説明していくね！
お願いします！
sessionStorageとは
sessionStorageは、Webページのセッションが続いている間、情報を保存しておけるブラウザの保存領域のようなものです。
通常JavaScriptで保持されている変数などの情報は、ページを再読み込みするとリセットされます。
sessionStorageを使うと、ページを閉じてもそのブラウザウィンドウ、もしくはタブを閉じない限り、情報を保持し続けることができます。
sessionStorageの使い方
保存するデータの形式は、JavaScriptのオブジェクトのようにキーと値の組み合わせになっています。
言い換えると、「データの名前」と「データ」という形で管理します。
今回は、sessionStorageの使い方として「保存する」「取得する」「削除する」の3つを解説します。
sessionStorageにデータを保存する
sessionStorage.setItem('キー', '値')sessionStorageはJavaScriptの組み込みオブジェクトであるため、何も定義しなくてもsessionStorageと記述すればアクセスできます。
データを保存するには、setItemメソッドにキーと値を指定します。
上記のコードを実行した際、指定されたキーが存在しなければ新規に作成し、すでに存在していれば既存の値を上書きします。
sessionStorageのデータの値には文字列しか指定できない点に留意しましょう。
sessionStorageにオブジェクトや配列を保存したい場合の処理は、次の章で解説します。
sessionStorageからデータを取得する
sessionStorage.getItem('キー')データを取得するには、getItemメソッドの引数に取得したいデータのキーを指定します。
setItemメソッドと対になるメソッドとして覚えてしまいましょう。
sessionStorageからデータを削除する
sessionStorage.removeItem('キー')データの削除にはremoveItemメソッドを使います。
getItemと同様、引数に削除したいデータのキーを指定します。
使用しなくなったデータを明示的に削除することで、データの混在を防ぐとともにsessionStorageの領域を無駄にしないようにしましょう。
sessionStorageにオブジェクトや配列を保存したい場合
sessionStorageは、データの型として文字列のみを認めています。
sessionStorageにオブジェクトや配列などの複数要素を格納したい場合には、文字列として格納したデータを、取得した後にオブジェクトや配列の形に戻すことが必要です。
オブジェクトを文字列にして保存し、取得後にオブジェクトに戻す
const data = {
cat: '猫',
dog: '犬'
};
//オブジェクトを文字列に変換
const dataStr = JSON.stringify(data);
sessionStorage.setItem('animals', dataStr);
const animals = sessionStorage.getItem('animals');
//文字列をオブジェクトに変換
const animalsObj = JSON.parse(animals);ポイントは、JSON.stringifyとJSON.parseをセットで使うことです。
オブジェクトを一度文字列に変換してからsessionStorageに保存し、取得後にオブジェクトに戻すことで、オブジェクトでのデータのやり取りを実現しています。
配列を文字列にして保存し、取得後に配列に戻す
const data = ['犬', '猫'];
//配列を文字列に変換
const dataStr = data.join();
sessionStorage.setItem('animals', dataStr);
const animals = sessionStorage.getItem('animals');
//文字列を配列に変換
const animalsArr = animals.split(',');配列の場合も、基本的な流れはオブジェクトと同じです。
配列の場合はjoinメソッドを使って、配列をカンマ区切りの文字列に変換しています。
取得した文字列はカンマ区切りなので、splitメソッドでカンマを区切り文字として配列にすることで、元の配列を復元できます。
sessionStorageとlocalStorageの違い
sessionStorageと非常によく似た概念として、localStorageがあります。
localStorageの文法は、先ほど解説したsessionStorageと全く同じです。
sessionStorageとlocalStorageの唯一の違いは、「データの保存期間」です。
sessionStorageの場合、ブラウザのウィンドウやタブを閉じるとデータが破棄されます。
一方、localStorageにはデータの保存期限がなく、ブラウザを再起動してもデータが保持されます。
データの使用期間に応じて使い分けるとよいでしょう。
ブラウザ対応状況
sessionStorageの主要ブラウザ対応状況は以下の通りです。
（上段：ブラウザ名 / 下段：バージョン）
| Google Chrome | Safari | Firefox | Edge | Internet Explorer |
| 5 | 4 | 2 | 12 | 8 |
現在利用されているブラウザであれば、ほぼ全ての環境で使用できることがわかります。
まとめ
sessionStorageを使うと、サーバサイドを介さずにちょっとしたデータの保持をすぐに実装することができます。
実際のアプリケーションで採用する際は、sessionStorage / localStorage / データベース のどれを使うのが最も適しているかを、データの量や保存期間に応じて判断し、使い分けましょう。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
