5.1 クッキーの基本的なプロパティ
クッキー (cookies) は、ウェブサイトがクライアント側（ユーザーのブラウザ）に保存できる小さなデータ片だよ。 20年前にlocalStorageより先に登場して、それ以来ずっと役立ってきたんだ。 今でもセッション情報、ユーザーの好み、トラッキングなどに頻繁に使われているんだ。
クッキーの基本的なプロパティ:
- 名前と値 (name=value): データを保持するキーと値のペア。
- ドメインとパス (domain, path): クッキーが適用されるURLやドメインを決める。
- 有効期限 (expires, max-age): クッキーが切れるときや削除されるときを決める。
- セキュリティ (secure, HttpOnly): クッキーがどのように、いつ送信されるかを指定する。
クッキーの設定
クッキーはJavaScriptやサーバーサイドのコードで設定できるよ。JavaScriptではdocument.cookieを使うんだ。
JavaScriptでのクッキー設定例:
JavaScript
document.cookie = "username=JohnDoe";
クッキーの追加パラメータ:
- expires: クッキーの有効期限を指定する。期限が切れたらクッキーは削除される。
- path: クッキーが有効なパスを決める。普通、サイト全体で使えるように/を設定する。
- domain: クッキーが有効なドメインを決める。
- secure: 設定されている場合、クッキーはHTTPSでのみ送信される。
- HttpOnly: 設定すると、クッキーはJavaScriptからアクセスできず、サーバーサイドのみがアクセス可能。
追加パラメータを使ったクッキー設定例:
JavaScript
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 クッキーの管理
1. クッキーの読み取り
現在のドキュメントのすべてのクッキーは1つの長い文字列としてdocument.cookieに保存されている。 クッキーの値を取得するには、この文字列を解析する必要があるんだ。
クッキーの読み取り例:
JavaScript
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// クッキー"username"の値を取得
const username = getCookie('username');
console.log(username); // 出力: JohnDoe
2. クッキーの更新
クッキーの値を更新するには、同じ名前で新しい値とパラメータを使って再設定するだけだよ。
クッキーの更新例:
JavaScript
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. クッキーの削除
クッキーを削除するには、期限切れの日付を設定する必要がある。
クッキーの削除例:
JavaScript
// 期限切れの日付を設定
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 クッキー操作の例
説明:
setCookie: 指定された名前、値、寿命（日数）でクッキーを設定するgetCookie: 指定された名前のクッキーの値を返すdeleteCookie: 指定された名前のクッキーを削除する
例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('クッキー"username"に値"JohnDoe"を7日間設定しました');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('クッキー"username"の値は: ' + cookieValue);
} else {
alert('クッキー"username"が見つかりません');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('クッキー"username"が削除されました');
}
</script>
</body>
</html>
5.4 サーバーサイドでのクッキー設定
サーバーでのHttpOnlyとSecureクッキーの扱い（Node.js）を見てみよう。
例:
JavaScript
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7日間
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
クッキーの使用例:
- 認証: クッキーは、ユーザーをリクエスト間で認証するセッショントークンの保存に頻繁に使われる。
- ユーザーの好み: クッキーは、インターフェイスの言語やテーマなどのユーザー設定を保存することができる。
- ユーザートラッキング: クッキーは、分析やコンテンツのパーソナライズのために、サイト上のユーザーの行動を追跡するために使用される。
GO TO FULL VERSION