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

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の領域を無駄にしないようにしましょう。

[PR] フロントエンドで副業する学習方法を動画で公開中

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メソッドでカンマを区切り文字として配列にすることで、元の配列を復元できます。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

sessionStorageとlocalStorageの違い

sessionStorageと非常によく似た概念として、localStorageがあります。

localStorageの文法は、先ほど解説したsessionStorageと全く同じです。

sessionStorageとlocalStorageの唯一の違いは、「データの保存期間」です。

sessionStorageの場合、ブラウザのウィンドウやタブを閉じるとデータが破棄されます。

一方、localStorageにはデータの保存期限がなく、ブラウザを再起動してもデータが保持されます。

データの使用期間に応じて使い分けるとよいでしょう。

ブラウザ対応状況

sessionStorageの主要ブラウザ対応状況は以下の通りです。
（上段：ブラウザ名 / 下段：バージョン）

現在利用されているブラウザであれば、ほぼ全ての環境で使用できることがわかります。

まとめ

sessionStorageを使うと、サーバサイドを介さずにちょっとしたデータの保持をすぐに実装することができます。

実際のアプリケーションで採用する際は、sessionStorage / localStorage / データベース のどれを使うのが最も適しているかを、データの量や保存期間に応じて判断し、使い分けましょう。

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

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

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

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する