ウェブ開発をしていると「キャッシュ」「ストレージ」「セッション」という似たような言葉が頻繁に登場します。これらはすべてデータを保存する仕組みですが、それぞれ異なる特性と用途があります。今回は、これらの違いを整理し、JavaScriptでクリアする方法をまとめてみました。
キャッシュクリアをするJavaScript「cache-cleaner.js」
Web開発をしていると、クライアントから「画像が変わっていない」「レイアウトが反映されない」といった報告を受けることがよくあります。その度に「ブラウザのキャッシュを削除してください」と説明するのも大変ですし、一般のユーザーにとってキャッシュクリアの操作は難しい... 続きを読む
📊 ウェブのデータ保存技術一覧
まず、主要な保存技術を一覧で見てみましょう：
| 技術 | 保持期間 | 容量 | クリア方法 | 主な用途 |
|---|---|---|---|---|
| ブラウザキャッシュ | 数日〜1年（自動管理） | 数百MB〜GB | スーパーリロード | 画像・CSS・JSの高速化 |
| sessionStorage | タブを閉じるまで | 5-10MB | JavaScript/開発者ツール | 一時的なデータ |
| localStorage | 永続的（手動削除まで） | 5-10MB | JavaScript/開発者ツール | ユーザー設定・下書き |
| Cookie | 設定次第（最大400日） | 4KB/個 | JavaScript/開発者ツール | ログイン状態・設定 |
| IndexedDB | 永続的（手動削除まで） | 数GB可能 | JavaScript/開発者ツール | 大量の構造化データ |
| Cache Storage | 永続的（手動削除まで） | 端末依存 | Service Worker/開発者ツール | PWAのオフライン対応 |
| PHPセッション | デフォルト24分 | サーバー依存 | サーバー側で管理 | ログイン・カート情報 |
🔍 それぞれの詳細解説
1. ブラウザキャッシュ（HTTP Cache）
特徴 ：
- ブラウザが自動的に管理する最も基本的なキャッシュ
- 画像、CSS、JavaScript、フォントなどの静的リソースを保存
- HTTPヘッダー（Cache-Control、Expires）で制御
- 開発者ツールには直接表示されない
クリア方法 ：
//JavaScriptでは直接クリアできない
//スーパーリロード（Shift + F5）または
//ブラウザ設定から手動でクリア
location.reload(true); //スーパーリロード（一部のキャッシュを無視）
2. Web Storage（sessionStorage + localStorage）
sessionStorage
特徴 ：
- タブごとに独立したストレージ
- タブを閉じると自動的に削除
- 同じサイトでも別タブなら別のデータ
使用例 ：
//初回訪問時のアニメーション制御
if (!sessionStorage.getItem('visited')) {
showWelcomeAnimation();
sessionStorage.setItem('visited', 'true');
}
//クリア
sessionStorage.clear();
localStorage
特徴 ：
- ブラウザを閉じても保持される
- 同一オリジンで共有（全タブで同じデータ）
- 明示的に削除するまで残る
使用例 ：
//テーマ設定の保存
localStorage.setItem('theme', 'dark');
//ユーザー設定の読み込み
const theme = localStorage.getItem('theme');
//クリア
localStorage.clear();
3. Cookie
特徴 ：
- サーバーとクライアント両方からアクセス可能
- HTTPリクエストごとに自動送信
- 容量が小さい（4KB/個）
- セキュリティ属性（HttpOnly、Secure、SameSite）を設定可能
種類 ：
- Session Cookie ：ブラウザを閉じると削除（Google アナリティクスのセッションとは別概念）
- Persistent Cookie ：有効期限まで保持（最大約400日）
使用例 ：
//Cookie設定（30日間有効）
document.cookie = "username=john; max-age=2592000; path=/";
//Cookie読み取り
const cookies = document.cookie;
//特定のCookie削除（有効期限を過去に設定）
document.cookie = "username=; max-age=0; path=/";
4. IndexedDB
特徴 ：
- 大容量データの保存が可能（数GB）
- 構造化データ（オブジェクト）をそのまま保存
- 非同期API
- トランザクション対応
使用例 ：
//データベースを開く
const request = indexedDB.open('MyDatabase', 1);
//データの保存
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'John', age: 30 });
};
//データベース削除
indexedDB.deleteDatabase('MyDatabase');
5. Cache Storage（Service Worker Cache）
特徴 ：
- PWA（Progressive Web App）のオフライン対応用
- Service Workerから操作
- ネットワークリクエストの結果をキャッシュ
- 開発者ツールの「キャッシュ ストレージ」に表示
使用例 ：
//Service Worker内でキャッシュ
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/offline.html',
'/styles.css'
]);
})
);
});
//キャッシュ削除
caches.delete('v1');
6. PHPセッション
特徴 ：
- サーバー側で管理
- Cookie（PHPSESSID）でクライアントと紐付け
- デフォルトで24分後に削除（設定変更可能）
- セキュアなデータ保存に適している
使用例 （PHP）：
//セッション開始
session_start();
//データ保存
$_SESSION['username'] = 'john';
//セッション破棄
session_destroy();
🧹 統合キャッシュクリーナーの実装
提供されたコードを基に、デバッグモードで動作するキャッシュクリーナーの動作を解説します：
📝 どのストレージを選ぶべきか
| 用途 | 推奨 | 理由 |
|---|---|---|
| 認証トークン | Cookie（HttpOnly） + サーバーセッション | セキュリティが高い |
| ユーザー設定 | localStorage | 永続性があり容量も十分 |
| フォーム一時保存 | sessionStorage | タブを閉じれば自動削除 |
| 大量データ | IndexedDB | GB単位の保存が可能 |
| オフライン対応 | Cache Storage | PWAの必須技術 |
| 静的リソース | ブラウザキャッシュ | 自動管理で手軽 |
まとめ
「キャッシュ」「ストレージ」「セッション」は、それぞれ異なる特性を持つデータ保存の仕組みです。ブラウザキャッシュは自動管理される一方、Web StorageやIndexedDBは開発者が完全にコントロールできます。用途に応じて適切な技術を選択し、必要に応じてJavaScriptでクリア処理を実装することで、より良いユーザー体験を提供できます。
関連記事
キャッシュクリアをするJavaScript「cache-cleaner.js」
Web開発をしていると、クライアントから「画像が変わっていない」「レイアウトが反映されない」といった報告を受けることがよくあります。その度に「ブラウザのキャッシュを削除してください」と説明するのも大変ですし、一般のユーザーにとってキャッシュクリアの操作は難しい... 続きを読む
【WordPress】画像URLにクエリパラメータを保存時に自動付与｜キャッシュ対策
WordPressで画像のキャッシュ対策として`?ver=`クエリを自動付与する方法を解説。`the_content`フィルター方式の限界と、`content_save_pre`でDBへ直接書き込む新方式の完全なコード、Better Search ... 続きを読む
画像のアスペクト比を自動計算・付与する | aspect-ratioが効かない原因とCLS対策
CSS aspect-ratioが効かない原因を押さえつつ、投稿保存時に実画像からアスペクト比（縦横比）を自動計算・自動付与し、SP/PCの出し分けまで手作業ゼロで維持する仕組み、CLS対策として無理なく運用するための実運用での使い方を解説します。 続きを読む