【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【HTML5】Web Storage APIの使い方【localStorage/sessionStorage】

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

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

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

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

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です。ぜひ一度使用してみてくださいね。

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

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

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

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍