API

この記事では「API」について、基本の意味と使い方を初心者向けにやさしく説明します。

Web Storage lets a website keep small pieces of data inside your browser — like a tiny notebook — so it can remember things such as your login or settings the next time you visit.

Web Storage

Web Storage は、Webサイトがあなたのブラウザの中に小さなメモ帳のようにデータを保存しておけるしくみで、ログイン状態や設定内容などを次にアクセスしたときにも覚えておくことができます。

Web Storageとは？

Web Storage（ウェブストレージ） は、Webアプリケーションがブラウザ上にデータを保存するために提供される仕組みの一つです。HTML5で導入された技術であり、以下のような特徴があります。

• ブラウザ側のストレージにキーと値のペアでデータを保存する
• 文字列形式（UTF-16）でデータを扱う
• 同じオリジン（プロトコル＋ドメイン＋ポート）内でのみデータにアクセス可能
• データのやりとりがHTTPヘッダを経由しないため、通信量を節約できる

Web Storage は大きく分けて localStorage と sessionStorage の2種類が存在します。Cookie と似たような目的で使われることがありますが、Cookie よりも大容量かつ扱いやすいという利点があり、現代的なWebアプリケーションでは幅広く利用されています。

Cookieとの違い

Web Storage と Cookie を比較すると、いくつかの相違点が明確に存在します。両者は「ブラウザにデータを保存する」という点では類似していますが、実装や運用において大きな差があります。

保存容量

Cookie

一般的に 4KB 程度が上限とされ、非常に少ないサイズしか保存できません。

Web Storage

ブラウザや環境によって上限は異なりますが、少なくとも 5MB 程度は保存可能です。より大きなデータを扱いやすくなっています。

データの送受信

Cookie

データはリクエスト時にサーバーへ自動的に送信されるため、ユーザー情報やセッション管理に適していますが、通信量が増えるというデメリットもあります。

Web Storage

サーバーへは自動的に送信されません。JavaScript を用いて自由に読み書きすることが可能で、不要な通信を抑えられます。

有効期限

Cookie

ExpiresやMax-Ageなどで有効期限を設定可能。設定しない場合はブラウザセッション終了後に破棄される “セッションCookie” となります。

Web Storage

localStorage は手動で消さない限り半永久的に残り、sessionStorage はタブやブラウザを閉じると破棄されます。

localStorageとsessionStorageの特徴

localStorage

• 同一オリジン内であれば、ブラウザを閉じてもデータが保持される
• 上限は少なくとも 5MB（ブラウザにより異なる）
• ユーザーが手動で消去しない限り永続的にデータが残る

主な利用シーンとしては「ログイン状態の維持」「ユーザーが行った設定内容の保持」「オフライン時の一時的なデータ保存」などが挙げられます。

sessionStorage

• 同一オリジン内であっても、タブやウィンドウを閉じたらデータは破棄される
• 上限は localStorage と同程度（ブラウザにより差異あり）
• ページリロードでは消えないが、別のタブを開くとそちらには共有されない

主な利用シーンとしては「一時的なユーザー操作の履歴の保持」「ページの状態復元」「入力フォームの内容の一時保存」など、同一タブ内だけで完結するケースに向いています。

基本的な使用方法

Web Storageは JavaScript の API を通じて利用します。オブジェクトとしては以下の2つが用意されています。

// localStorage を使う場合
window.localStorage

// sessionStorage を使う場合
window.sessionStorage

データの書き込み（保存）

// localStorage にデータを保存する
localStorage.setItem('userName', 'Alice');

// sessionStorage にデータを保存する
sessionStorage.setItem('sessionId', 'abc123');

データの読み込み（取得）

// localStorage からデータを取得する
const userName = localStorage.getItem('userName');
console.log(userName); // "Alice"

// sessionStorage からデータを取得する
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // "abc123"

データの削除

// 特定のキーを削除する
localStorage.removeItem('userName');

// すべてのキーを削除する
localStorage.clear();

sessionStorage も同様のメソッドが用意されています。

データをオブジェクト形式で保存する

Web Storage は文字列しか保存できませんが、JSON形式を活用することで複雑な構造のデータを扱うことが可能です。

// オブジェクトをJSON文字列に変換して保存する例
const user = {
	id: 1001,
	name: 'Bob',
	preferences: {
		theme: 'dark',
		language: 'ja'
	}
};

localStorage.setItem('currentUser', JSON.stringify(user));

// データを取り出す際は JSON をパースする
const storedUser = JSON.parse(localStorage.getItem('currentUser'));
console.log(storedUser.name); // "Bob"
console.log(storedUser.preferences.theme); // "dark"

JSON文字列に変換して保存し、取り出すときに JSON.parse() でオブジェクトに戻す手順は、実務でも非常によく使われます。

ストレージイベントの活用

Web Storage を利用していると、他のタブやウィンドウでデータが変更された場合に同期したいというケースが出てきます。そのような場合に役立つのが storage イベント です。

<script>
	window.addEventListener('storage', (event) => {
		console.log('key:', event.key);
		console.log('oldValue:', event.oldValue);
		console.log('newValue:', event.newValue);
		console.log('url:', event.url);
	});
</script>

localStorage の値が別のタブで変更されると、この storage イベントが発火し、変更内容を検知できます。ただし sessionStorage に関しては、別のタブには共有されないため、このイベントは発火しません。

利用例

• 複数のタブで共通の状態を同期する
• あるタブでユーザーがログアウトしたら、他のタブでも自動的にログアウトさせる

などの機能を簡単に実装できます。

セキュリティと注意点

保存データの機微情報

Web Storage はローカルに保存されるため、サーバー側とは別の場所にデータが残ります。このため、機微情報（パスワードやクレジットカード情報など）を保存するのは推奨されません。盗み見や改ざんのリスクを考慮し、機密性の高いデータは Web Storage ではなくサーバー側で安全に管理する必要があります。

XSS（クロスサイト・スクリプティング）の危険性

もしサイトが XSS 攻撃に脆弱な状態にある場合、攻撃者は JavaScript を不正に実行することで、Web Storage に保存されているデータを読み取ったり、改ざんしたりする恐れがあります。対策としては以下のようなものがあります。

• すべてのユーザー入力をサニタイズする
• CSP（Content Security Policy）の導入を検討する
• 信頼できないスクリプトを実行しないよう設計する

同一オリジンポリシー

Web Storage には 同一オリジンポリシー が適用されるため、異なるドメインやプロトコル、ポート番号では、同じストレージへアクセスできません。これにより、異なるサイトでのデータ盗用や衝突を防ぐことが可能です。

よくある質問（FAQ）

Q1. localStorageとsessionStorageはどちらを選べばいいの？

• タブやウィンドウを閉じてもデータを保持しておきたい → localStorage
• タブが閉じられたらデータも消えてほしい → sessionStorage
• 必要に応じて使い分けるのが基本です。

Q2. Web Storageのデータ上限はどれくらい？

• 一般的には 5MB 程度が目安ですが、ブラウザや OS、バージョンによって異なる場合があります。大量のデータを保存する場合は IndexedDB などの他の仕組みを検討するのも手段の一つです。

Q3. Cookie との併用はできる？

• 可能です。ログインセッションの管理など Cookie の方が便利な場合もあるため、用途によって使い分けたり併用します。

Q4. Web Storage はブラウザごとに別々ですか？

• 同一端末の同一ブラウザ、同一ユーザーアカウント、同一オリジンの範囲であれば、同じストレージが共有されます。異なるブラウザを使えば、ストレージは別々になります。

中級者以上向けの実践的アドバイス

Web Storageが使えない場合のフォールバック

ユーザー環境やブラウザ設定によっては、Web Storage が無効化されている場合もあります。そのため、フォールバック（代替手段） を用意しておくと、より堅牢なアプリケーションになるでしょう。具体例としては、Cookie を代わりに用いる、サーバー側セッションを活用するなどが挙げられます。

キャッシュ戦略との組み合わせ

localStorage に画像やファイルのメタ情報、ユーザーの設定内容などを保存しておくと、次回ページ表示時に読み込みを高速化できます。ただし、ファイルそのものを直接保存する場合は、Base64 エンコードなどでサイズが膨大になりやすいので注意が必要です。

端末・ブラウザごとの容量制限

モバイル端末などではデスクトップブラウザより厳しい容量制限がかかることがあるため、使い方次第ではサイズオーバーのエラー（QuotaExceededError）が発生する可能性があります。大量データの保存を試みる場合は例外処理や事前チェックを行い、ユーザーがストレージを圧迫していないかを考慮する必要があります。

ユニバーサルなデータ管理戦略

アプリ全体でデータ管理を行う際、React や Vue といったフロントエンドフレームワークを使用している場合には、Store（Redux や Vuex など） と Web Storage を組み合わせることが多いです。State が更新されるタイミングで自動的に localStorage や sessionStorage に保存する仕組みを作ると、ユーザー体験が格段に良くなる一方で、データの衝突やバージョン管理をどう行うかという課題が出てきます。これらの課題に対処するには、アプリケーション全体のアーキテクチャ設計が重要です。

セキュアな実装への配慮

• HTTPS を必ず利用し、通信中の傍受を防ぐ
• 悪意あるスクリプトが実行されないように XSS対策（入力値サニタイズ、CSP 等）を行う
• 重要情報は可能な限りサーバー側に保存し、トークンや設定情報に限定して Web Storage を使用する

まとめ

Web Storage は、Cookie よりも多くのデータを扱いやすく、かつシンプルに扱える便利な機能です。初学者の方は、まずは localStorage と sessionStorage の違い、そしてデータの保存・取得・削除の3つの操作を覚えることから始めると良いでしょう。

一方で、中級者以上の方は、ストレージイベント を使ったリアルタイム同期や、大容量データを扱う際の容量の制限、XSS対策などのセキュリティ面の考慮が重要なポイントとなります。Web Storage は万能ではありませんが、ブラウザ上でちょっとした設定や状態を保存する場面では非常に有用です。

以上が Web Storage（localStorage と sessionStorage）の概要から活用方法までを網羅した解説となります。実装時にはセキュリティやブラウザの互換性、さらにユーザー体験を考慮しながら最適なソリューションを選択してください。