Web Storage is a mechanism that allows storing larger amounts of data in the browser compared to cookies, enabling both persistent and temporary data storage and retrieval within the same origin using localStorage and sessionStorage.
Web Storage（ウェブストレージ） は、Webアプリケーションがブラウザ上にデータを保存するために提供される仕組みの一つです。HTML5で導入された技術であり、以下のような特徴があります。
Web Storage は大きく分けて localStorage と sessionStorage の2種類が存在します。Cookie と似たような目的で使われることがありますが、Cookie よりも大容量かつ扱いやすいという利点があり、現代的なWebアプリケーションでは幅広く利用されています。
Web Storage と Cookie を比較すると、いくつかの相違点が明確に存在します。両者は「ブラウザにデータを保存する」という点では類似していますが、実装や運用において大きな差があります。
localStorage は手動で消さない限り半永久的に残り、sessionStorage はタブやブラウザを閉じると破棄されます。主な利用シーンとしては「ログイン状態の維持」「ユーザーが行った設定内容の保持」「オフライン時の一時的なデータ保存」などが挙げられます。
主な利用シーンとしては「一時的なユーザー操作の履歴の保持」「ページの状態復元」「入力フォームの内容の一時保存」など、同一タブ内だけで完結するケースに向いています。
Web Storageは JavaScript の API を通じて利用します。オブジェクトとしては以下の2つが用意されています。
JavaScript
// localStorage を使う場合
window.localStorage
// sessionStorage を使う場合
window.sessionStorageJavaScript
// localStorage にデータを保存する
localStorage.setItem('userName', 'Alice');
// sessionStorage にデータを保存する
sessionStorage.setItem('sessionId', 'abc123');JavaScript
// localStorage からデータを取得する
const userName = localStorage.getItem('userName');
console.log(userName); // "Alice"
// sessionStorage からデータを取得する
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // "abc123"JavaScript
// 特定のキーを削除する
localStorage.removeItem('userName');
// すべてのキーを削除する
localStorage.clear();sessionStorage も同様のメソッドが用意されています。
Web Storage は文字列しか保存できませんが、JSON形式を活用することで複雑な構造のデータを扱うことが可能です。
JavaScript
// オブジェクトを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 イベント です。
HTML
<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 攻撃に脆弱な状態にある場合、攻撃者は JavaScript を不正に実行することで、Web Storage に保存されているデータを読み取ったり、改ざんしたりする恐れがあります。対策としては以下のようなものがあります。
Web Storage には 同一オリジンポリシー が適用されるため、異なるドメインやプロトコル、ポート番号では、同じストレージへアクセスできません。これにより、異なるサイトでのデータ盗用や衝突を防ぐことが可能です。
ユーザー環境やブラウザ設定によっては、Web Storage が無効化されている場合もあります。そのため、フォールバック（代替手段） を用意しておくと、より堅牢なアプリケーションになるでしょう。具体例としては、Cookie を代わりに用いる、サーバー側セッションを活用するなどが挙げられます。
localStorage に画像やファイルのメタ情報、ユーザーの設定内容などを保存しておくと、次回ページ表示時に読み込みを高速化できます。ただし、ファイルそのものを直接保存する場合は、Base64 エンコードなどでサイズが膨大になりやすいので注意が必要です。
モバイル端末などではデスクトップブラウザより厳しい容量制限がかかることがあるため、使い方次第ではサイズオーバーのエラー（QuotaExceededError）が発生する可能性があります。大量データの保存を試みる場合は例外処理や事前チェックを行い、ユーザーがストレージを圧迫していないかを考慮する必要があります。
アプリ全体でデータ管理を行う際、React や Vue といったフロントエンドフレームワークを使用している場合には、Store（Redux や Vuex など） と Web Storage を組み合わせることが多いです。State が更新されるタイミングで自動的に localStorage や sessionStorage に保存する仕組みを作ると、ユーザー体験が格段に良くなる一方で、データの衝突やバージョン管理をどう行うかという課題が出てきます。これらの課題に対処するには、アプリケーション全体のアーキテクチャ設計が重要です。
Web Storage は、Cookie よりも多くのデータを扱いやすく、かつシンプルに扱える便利な機能です。初学者の方は、まずは localStorage と sessionStorage の違い、そしてデータの保存・取得・削除の3つの操作を覚えることから始めると良いでしょう。
一方で、中級者以上の方は、ストレージイベント を使ったリアルタイム同期や、大容量データを扱う際の容量の制限、XSS対策などのセキュリティ面の考慮が重要なポイントとなります。Web Storage は万能ではありませんが、ブラウザ上でちょっとした設定や状態を保存する場面では非常に有用です。
以上が Web Storage（localStorage と sessionStorage）の概要から活用方法までを網羅した解説となります。実装時にはセキュリティやブラウザの互換性、さらにユーザー体験を考慮しながら最適なソリューションを選択してください。