【JavaScript】ページ間でデータの保持・受け渡し
ar
| 手法 | 持続期間 | ページ 遷移後 | ブラウザ 再起動後 | スコープ | 容量目安 | データ形式 | サーバー送信 | 特徴 |
|---|---|---|---|---|---|---|---|---|
| sessionStorage | タブを閉じるまで | 〇 | ✖ | 同一タブ内 | 約5MB程度 | 文字列 | 送信されない | 一時的なデータ保持 |
| localStorage | 削除されるまで （永続的） | 〇 | 〇 | 同一オリジン内 すべてのタブ | 約5MB程度 | 文字列 | 送信されない | 長期的なデータ保存 |
| URLパラメータ | URLに含まれる間 （アクセス時のみ） | 〇 | 〇 | 該当URL リンク先 | URL長に依存 （短い） | 文字列 | 送信：URLに含まれる | ページ間の簡易な受け渡し |
| window.name | タブを閉じるまで | 〇 | ✖ | 同一タブ内 ページ遷移間 | 比較的自由 （文字列） | 文字列 | 送信されない | ページ遷移時の一時保持 |
| Cookie | 設定次第 （短期～永続） | 〇 | 〇 | 同一ドメイン・パス内 | 約4KB （1つにつき） | 文字列 | 送信：HTTPリクエスト時 | セッション管理、認証、 トラッキング |
| IndexedDB | 削除されるまで （永続的） | 〇 | 〇 | 同一オリジン内 | 数百MB～ 数GB程度 | JSON形式 | 送信されない | 大量・複雑なデータの保存 |
| Service Worker | キャッシュの管理次第 （更新・削除されるまで） | 〇 | 〇 | 同一オリジン内 | キャッシュ容量に依存 | レスポンス （Blob等） | 送信されない | オフライン対応、 バックグラウンド処理、PWA |
1. sessionStorage（セッションストレージ）
- 同じタブ内のページ移動ではデータを保持 できる
- ブラウザを閉じるとデータが消える
// データを保存
sessionStorage.setItem("key", "セッションデータ");
// データを取得
let value = sessionStorage.getItem("key");
// データを削除
sessionStorage.removeItem('key');
// すべてのデータを削除
sessionStorage.clear();sessionStorage.setItem('username', 'Taro');→ username というキーに Taro を保存する
let user = sessionStorage.getItem('username');→ sessionStorage から username の値を取得
sessionStorage.removeItem('username');→ username のデータを削除
let user = { name: "Taro", age: 25 };
sessionStorage.setItem('user', JSON.stringify(user));オブジェクトを保存
let storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // "Taro"
console.log(storedUser.age); // 25オブジェクトを取得
- JSON.stringify() でオブジェクトを文字列に変換して保存
- JSON.parse() で文字列をオブジェクトに戻して取得
- スコープ（有効範囲）：同じタブ内でのみ有効（別のタブを開くとデータは共有されない）
- 持続時間：タブを閉じるまで有効（ページをリロードしてもデータは保持）
- 保存可能なデータ：文字列（String）のみ（オブジェクトは JSON.stringify() で保存）
- サイズ制限：約5MB（ブラウザによる）
| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（保持される） |
| ブラウザを閉じた後 | ✖（消える） |
| 使いやすさ | ◎（簡単） |
2. localStorage（ローカルストレージ）
- ページ移動してもデータを保持
- ブラウザを閉じてもデータが残る
// データを保存
localStorage.setItem("key", "ローカルデータ");
// データを取得
let value = localStorage.getItem("key");
// データを削除
localStorage.removeItem('key');
// すべてのデータを削除
localStorage.clear();localStorage.setItem('username', 'Taro');→ username というキーに Taro を保存する
let user = localStorage.getItem('username');→ localStorage から username の値を取得
localStorage.removeItem('username');→ username のデータを削除
let user = { name: "Taro", age: 25 };
localStorage.setItem('user', JSON.stringify(user));オブジェクトを保存
let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // "Taro"
console.log(storedUser.age); // 25オブジェクトを取得
- JSON.stringify() でオブジェクトを文字列に変換して保存
- JSON.parse() で文字列をオブジェクトに戻して取得
- スコープ（有効範囲）：同じオリジン（ドメイン）内のすべてのページで共有
- 持続時間：明示的に削除するまで（ブラウザを閉じても消えない）
- 保存可能なデータ：文字列（String）のみ（オブジェクトは JSON.stringify() で保存）
- サイズ制限：約5MB（ブラウザによる）
| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（保持される） |
| ブラウザを閉じた後 | 〇（残る） |
| 使いやすさ | ◎（簡単） |
3. クエリパラメータ (URL?key=value) を使う
- URL にデータを含めて次のページに渡す方法
- リロードやタブを変えてもデータを保持できる
- URLをコピーするとデータも一緒に渡せる
// 現在のURLにデータを追加
window.location.href = "next_page.html?name=John&age=30";
// URLのクエリパラメータを取得
const params = new URLSearchParams(window.location.search);
let name = params.get("name");
let age = params.get("age");
console.log(name, age); // "John", "30"| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（URLに含まれている限り保持） |
| ブラウザを閉じた後 | 〇（URLを開けば保持） |
| 使いやすさ | △（URLが長くなる） |
4. window.name を使う
- ページ間でデータを保持できる
- タブやウィンドウを閉じるとデータは消える
- リロードしてもデータは維持される
// データを保存
window.name = "このデータはページ移動しても消えない";
// データを取得
console.log(window.name);| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（保持される） |
| ブラウザを閉じた後 | ✖（消える） |
| 使いやすさ | △（あまり使われない） |
5. Cookie（クッキー）
- ページをまたいでデータを保持
- 有効期限を設定すれば長期間保持可能
- サーバーとの通信時にもデータを送信
// クッキーを保存（1日有効）
document.cookie = "user=John; max-age=86400; path=/";
// クッキーを取得
console.log(document.cookie);- path=/：指定したパス以下のページで有効（デフォルトは現在のページのみ）
- domain=example.com：指定したドメインとそのサブドメインで有効
- max-age=秒数：有効期限を秒単位で指定（例：3600 = 1時間）
- expires=日付：有効期限を特定の日付に指定（Wed, 21 Mar 2025 12:00:00 GMT）
- Secure：HTTPS のみで送信
- HttpOnly：JavaScript からアクセス不可（サーバーのみ使用可）
- SameSite=Strict：他サイトへのリクエスト時に Cookie を送らない（セキュリティ強化）
function getCookie(name) {
let cookies = document.cookie.split("; ");
for (let cookie of cookies) {
let [key, value] = cookie.split("=");
if (key === name) {
return value;
}
}
return null;
}
console.log(getCookie("username"));特定の Cookie を取得
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
deleteCookie("username");簡単な削除関数
- 保存場所：ブラウザ に保存され、サーバーにも送信 される
- スコープ（有効範囲）：同じドメイン内のすべてのページで利用可能
- 持続時間：明示的に削除するまで または 有効期限が切れるまで
- サイズ制限：1つのCookieにつき 4KB（約4096バイト）まで
- データの型：文字列のみ（オブジェクトは JSON.stringify() で保存）
| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（保持される） |
| ブラウザを閉じた後 | 〇（期限内なら残る） |
| 使いやすさ | △（書式が面倒） |
6. IndexedDB
- 大容量データ（数MB～GB単位）を保持可能
- オブジェクトデータを扱いやすい
- PWA（Progressive Web App）などで使われる
IndexedDB の基本構造
IndexedDB は、RDB（リレーショナルデータベース）のようにデータベース → オブジェクトストア（テーブルのようなもの） → レコード（データ） という階層構造を持ちます。
データベース（DB）
├─ オブジェクトストア（テーブルのようなもの）
│ ├─ キー（主キー）
│ ├─ 値（JSONデータ）データの読み書きには「トランザクション」が必要です。トランザクションとは、一連の処理をまとめて実行し、途中でエラーが発生したら巻き戻せる仕組みです。
// データベースを作成する
const request = indexedDB.open("MyDatabase", 1); // DB名「MyDatabase」、バージョン「1」
request.onupgradeneeded = function (event) {
let db = event.target.result;
if (!db.objectStoreNames.contains("users")) {
db.createObjectStore("users", { keyPath: "id" }); // "users"テーブルを作成（idをキーに）
}
};
request.onsuccess = function (event) {
console.log("DB接続成功");
};
request.onerror = function (event) {
console.error("DB接続エラー", event);
};open() は バージョン番号が異なるとonupgradeneeded が実行される（スキーマ変更時）
// データを追加（登録・更新）する
function addUser(id, name, age) {
let db = request.result;
let transaction = db.transaction(["users"], "readwrite"); // 書き込みモード
let store = transaction.objectStore("users"); // "users" テーブル
let user = { id: id, name: name, age: age };
let addRequest = store.put(user); // put()は既存データがあれば上書きする
addRequest.onsuccess = function () {
console.log("データ追加成功", user);
};
addRequest.onerror = function (event) {
console.error("データ追加失敗", event);
};
}
addUser(1, "太郎", 25);
put() は id が重複していた場合は上書き、add() はエラーになる。
// データを取得する
function getUser(id) {
let db = request.result;
let transaction = db.transaction(["users"], "readonly");
let store = transaction.objectStore("users");
let getRequest = store.get(id);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("データ取得成功", getRequest.result);
} else {
console.log("データが見つかりません");
}
};
getRequest.onerror = function (event) {
console.error("データ取得失敗", event);
};
}
getUser(1);キーを指定してデータを取得できる（検索処理）
// データを削除する
function deleteUser(id) {
let db = request.result;
let transaction = db.transaction(["users"], "readwrite");
let store = transaction.objectStore("users");
let deleteRequest = store.delete(id);
deleteRequest.onsuccess = function () {
console.log(`ID:${id} のデータを削除しました`);
};
deleteRequest.onerror = function (event) {
console.error("データ削除失敗", event);
};
}
deleteUser(1);delete(id) を使って特定のデータを削除できる
// 全データを取得する
function getAllUsers() {
let db = request.result;
let transaction = db.transaction(["users"], "readonly");
let store = transaction.objectStore("users");
let getAllRequest = store.getAll();
getAllRequest.onsuccess = function () {
console.log("全データ取得成功", getAllRequest.result);
};
getAllRequest.onerror = function (event) {
console.error("全データ取得失敗", event);
};
}
getAllUsers();getAll() を使うと全データを一括取得できる
- 保存場所：ブラウザ（クライアント側）
- データ形式：オブジェクト（JSON 形式）
- 容量制限：数百MB〜数GB（ブラウザによる）
- 非同期処理：IndexedDB は Promise または async/await で扱う
- トランザクション：データを安全に管理できる（ACID特性あり）
| 項目 | 内容 |
|---|---|
| ページ移動後 | 〇（保持される） |
| ブラウザを閉じた後 | 〇（消えない） |
| 使いやすさ | ✖（難しい） |
7. Service Worker（高度な方法）
- キャッシュを利用してデータを保持
- オフライン時でもデータを提供可能
- プッシュ通知やバックグラウンド処理もできる
- PWA でよく使われる
index.html（Service Worker を登録するページ）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker のテスト</title>
</head>
<body>
<h1>Service Worker のデモ</h1>
<p>このページでは Service Worker の動作を確認できます。</p>
<script src="index.js"></script> <!-- JavaScript を読み込む -->
</body>
</html>
index.js（Service Worker を登録するスクリプト）
// ブラウザが Service Worker をサポートしているか確認
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js') // sw.js を登録
.then(registration => {
console.log("Service Worker 登録成功！", registration);
})
.catch(error => {
console.log("Service Worker 登録失敗:", error);
});
}sw.js（Service Worker のコード）
const CACHE_NAME = 'my-cache-v1';
const CACHE_URLS = [
'/', // index.html
'/index.js', // メインの JavaScript
'/style.css', // CSS
'/offline.html' // オフライン用ページ
];
// インストールイベント（キャッシュを保存）
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log("キャッシュ保存中...");
return cache.addAll(CACHE_URLS);
})
);
});
// フェッチイベント（リクエストをキャッシュから返す）
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).catch(() => caches.match('/offline.html'));
})
);
});
// アクティベートイベント（古いキャッシュを削除）
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(
keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
);
})
);
});
