【JavaScript】localStorage・sessionStorageの使い方

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでWeb Storage APIのlocalStorage・sessionStorageの使い方をご紹介しています。

localStorage・sessionStorageは、ユーザーのローカル環境にテキストデータを保存する際に有効な方法です。

では、解説していきます。

Web Strorage APIとは?

Web Storage APIは、ページを閲覧しているユーザーのブラウザにテキストデータを保存するためのAPIです。
よく似た仕組みに「Cookie」がありますが、「Cookie」よりも直感的に操作することが可能となっています。

Web Storageはデータの保存の他に、取得や更新、削除といった操作も可能です。これらはすべてJavaScriptで実現することができます。
データは「key: value」のペアで保存されるため、取得や更新、削除も短いコードで済む点も使いやすさに直結しています。

Web Stotage APIには、下記の2種類あります。

  • sessionStorage
  • localStorage

基本的な使い方は同じですが、用途は異なりますので、それぞれの使い方を詳しく見ていきましょう。

sessionStorage

sessionStorageは、セッション限りで有効なデータを保存することができるプロパティです。

セッション限りのため、タブやウィンドウ、ブラウザを閉じたタイミングで削除されます。
Cookie」のように保存期間やその他属性を指定することはできません。

下記はsessionStorageの特長です。

データ共有別ウィンドウで共有できない
データ保存期間タブやウィンドウが閉じるまで
容量1オリジンに対して5MB(ブラウザによっては10MB)
※オリジンとは、ウェブコンテンツにアクセスするために定義されたスキーム、ホスト、ポートからなるURL
https://developer.mozilla.org/ja/docs/Glossary/Origin

以上のように、セッション限りでデータを共有したい場合に有効な方法になります。

では、sessionStorageの使い方を見ていきましょう。

データを保存する

sessionStorage.setItem('key', 'value');

データを取得する

const data = sessionStorage.getItem('key');

データを削除する

sessionStorage.removeItem('key');

上記のように保存、取得、削除といった操作が簡潔に実行できる点もWeb Storage APIならではの魅力ですね。

では続いて、localStorageの概要と使い方を見ていきましょう。

localStorage

localStorageは、保存期間に制限がない、永続的にデータを保存することができるプロパティです。

保存できるデータの容量はsessionStorageと相違ないですが、JavaScriptからの操作やユーザーが削除しない限りデータを保持し続けることができるという点が異なります。

下記はlocalStorageの特長です。

データ共有別ウィンドウで共有できる
データ保存期間制限なし
容量1オリジンに対して5MB(ブラウザによっては10MB)
※オリジンとは、ウェブコンテンツにアクセスするために定義されたスキーム、ホスト、ポートからなるURL
https://developer.mozilla.org/ja/docs/Glossary/Origin

上記のようにlocalStorageは保存期間を指定がなく、別タブやウィンドウでデータを共有したいときに有効な方法になりそうですね。

では続いて、localStorage使い方を見ていきましょう。

データを保存する

localStorage.setItem('key', 'value');

データを取得する

const data = localStorage.getItem('key');

データを削除する

localStorage.removeItem('key');

基本的にはsessionStorageと同じです。プロパティ名をlocalStorageに変えてご使用ください。

最後に

今回はWeb Storage APIのsessionStorageとlocalStorageにフォーカスを当ててみました。実装されてから数年経過しているためご存じの方も多いかと思います。

sessionStorageとlocalStorageは細かい設定ができないという点を除き、データを保存する目的であればとても扱いやすいAPIです。ぜひ一度使用してみてくださいね。

以上、 JavaScriptでWeb Storage APIのlocalStorage・sessionStorageの使い方のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍