【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の使い方のご紹介でした！