ウェブ開発をしていると「キャッシュ」「ストレージ」「セッション」という似たような言葉が頻繁に登場します。これらはすべてデータを保存する仕組みですが、それぞれ異なる特性と用途があります。今回は、これらの違いを整理し、JavaScriptでクリアする方法をまとめてみました。
キャッシュクリアをするJavaScript「cache-cleaner.js」
📊 ウェブのデータ保存技術一覧
まず、主要な保存技術を一覧で見てみましょう：
| 技術 | 保持期間 | 容量 | クリア方法 | 主な用途 |
|---|---|---|---|---|
| ブラウザ キャッシュ |
数日〜1年 （自動管理） |
数百MB〜GB | スーパーリロード | 画像・CSS・JSの 高速化 |
| session Storage |
タブを 閉じるまで |
5-10MB | JavaScript/ 開発者ツール |
一時的なデータ |
| local Storage |
永続的 （手動削除まで） |
5-10MB | JavaScript/ 開発者ツール |
ユーザー設定・下書き |
| Cookie | 設定次第 （最大400日） |
4KB/個 | JavaScript/ 開発者ツール |
ログイン状態・設定 |
| Indexed DB |
永続的 （手動削除まで） |
数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」
【WordPress】画像URLにクエリパラメータを保存時に自動付与｜キャッシュ対策
画像のアスペクト比を自動計算・付与する | aspect-ratioが効かない原因とCLS対策
