はじめに
この記事を読めば、JavaScript Cookieの使い方がすぐに分かるようになります。
初心者の方でも理解できるように、JavaScript Cookieの基本から応用例まで、わかりやすく解説しています。
10のサンプルコードを通して、具体的な使い方を学んでいきましょう。
●JavaScript
Cookieとは JavaScript Cookieは、Webサイトがユーザーのブラウザに一時的にデータを保存するための仕組みです。
これにより、Webサイトはユーザーの設定や過去のアクティビティを記憶でき、パーソナライズされたユーザー体験を提供できます。
○Cookieの基本概念
Cookieは、名前と値のペアを持つ小さなテキストファイルです。
それらはユーザーのブラウザに保存され、Webサイトがその情報を利用できるようになります。
また、Cookieには有効期限が設定されており、期限が切れると自動的に削除されます。
●JavaScript Cookieの使い方
ここでは、JavaScriptでCookieを操作する基本的な方法を4つのサンプルコードで紹介します。
○サンプルコード1：Cookieの作成
このコードでは、Cookieを作成しています。
この例では、名前と値を設定し、有効期限を設定しています。
// Cookieを作成する関数
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=/";
}
// Cookieを作成
setCookie("username", "Taro", 7);○サンプルコード2：Cookieの取得
このコードでは、Cookieの値を取得しています。
この例では、指定された名前のCookieの値を返す関数を作成しています。
// Cookieを取得する関数
function getCookie(name) {
const nameEQ = name + "=";
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let c = cookies[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// Cookieの値を取得
const username = getCookie("username");
console.log("username:", username);○サンプルコード3：Cookieの更新
このコードでは、既存のCookieを更新する方法を紹介しています。
この例では、名前を指定して新しい値と有効期限を設定して、Cookieを更新しています。
// Cookieを更新する関数
function updateCookie(name, newValue, days) {
setCookie(name, newValue, days);
}
// Cookieを更新
updateCookie("username", "Jiro", 7);○サンプルコード4：Cookieの削除
このコードでは、Cookieを削除する方法を紹介しています。
この例では、名前を指定して、有効期限を過去の日付に設定することで、Cookieを削除しています。
// Cookieを削除する関数
function deleteCookie(name) {
setCookie(name, "", -1);
}
// Cookieを削除
deleteCookie("username");●JavaScript Cookieの応用例
ここでは、JavaScript Cookieを使った応用例を6つのサンプルコードで紹介します。
○サンプルコード5：ユーザーの訪問回数を記録
このコードでは、ユーザーの訪問回数をCookieに記録する方法を紹介しています。
この例では、訪問回数をカウントし、画面に表示しています。
// 訪問回数をカウントする関数
function countVisits() {
let visits = getCookie("visits");
if (visits === null) {
visits = 1;
} else {
visits = parseInt(visits) + 1;
}
setCookie("visits", visits, 30);
document.getElementById("visits").innerHTML = "訪問回数：" + visits + "回";
}
countVisits();○サンプルコード6：ユーザーの言語設定を保存
このコードでは、ユーザーの言語設定をCookieに保存する方法を紹介しています。
この例では、言語設定を選択し、ページの言語を変更しています。
// 言語設定を保存・適用する関数
function setLanguage(lang) {
setCookie("language", lang, 30);
applyLanguage(lang);
}
// 言語設定を適用する関数
function applyLanguage(lang) {
const elements = document.querySelectorAll("[data-lang]");
for (const element of elements) {
element.textContent = element.getAttribute("data-lang-" + lang);
}
}
const savedLanguage = getCookie("language");
if (savedLanguage) {
applyLanguage(savedLanguage);
}○サンプルコード7：ショッピングカート機能の実装
このコードでは、ショッピングカート機能を実装する方法を紹介しています。
この例では、商品IDと数量をCookieに保存し、カートの内容を表示しています。
// カートに商品を追加する関数
function addToCart(itemId, quantity) {
const cart = JSON.parse(getCookie("cart") || "{}");
cart[itemId] = (cart[itemId] || 0) + quantity;
setCookie("cart", JSON.stringify(cart), 30);
}
// カートの内容を表示する関数
function displayCart() {
const cart = JSON.parse(getCookie("cart") || "{}");
let output = "カートの内容：";
for (const itemId in cart) {
output += ` 商品ID: ${itemId}, 数量: ${cart[itemId]};`;
}
document.getElementById("cart").innerHTML = output;
}
addToCart("item1", 1);
addToCart("item2", 2);
displayCart();○サンプルコード8：ログイン状態の保持
このコードでは、ログイン状態を保持する方法を紹介しています。
この例では、ログイン成功時にセッションIDをCookieに保存し、アクセス時にセッションIDの有無でログイン状態を確認しています。
// セッションIDを保存する関数
function saveSessionId(sessionId) {
setCookie("sessionId", sessionId, 1);
}
// ログイン状態を確認する関数
function checkLoginStatus() {
const sessionId = getCookie("sessionId");
if (sessionId) {
document.getElementById("loginStatus").innerHTML = "ログイン済み";
} else {
document.getElementById("loginStatus").innerHTML = "未ログイン";
}
}
saveSessionId("abc123");
checkLoginStatus();○サンプルコード9：ダークモードの設定を記憶
このコードでは、ダークモードの設定をCookieに保存する方法を紹介しています。
この例では、ダークモードの有効・無効を切り替え、設定を記憶して適用しています。
// ダークモードを切り替える関数
function toggleDarkMode() {
const isDarkMode = getCookie("darkMode") === "true";
const newDarkMode = !isDarkMode;
setCookie("darkMode", newDarkMode, 30);
applyDarkMode(newDarkMode);
}
// ダークモードの設定を適用する関数
function applyDarkMode(isDarkMode) {
if (isDarkMode) {
document.body.classList.add("dark-mode");
} else {
document.body.classList.remove("dark-mode");
}
}
const savedDarkMode = getCookie("darkMode");
if (savedDarkMode) {
applyDarkMode(savedDarkMode === "true");
}○サンプルコード10：アクセス解析に利用
このコードでは、アクセス解析にCookieを利用する方法を紹介しています。
この例では、ユーザーがどのページから訪問したかを記録し、次回の訪問時に参照ページを表示しています。
// 参照元ページを保存する関数
function saveReferrer() {
const referrer = document.referrer || "直接訪問";
setCookie("referrer", referrer, 1);
}
// 保存された参照元ページを表示する関数
function showReferrer() {
const savedReferrer = getCookie("referrer");
if (savedReferrer) {
document.getElementById("referrer").innerHTML = "前回の参照元ページ：" + savedReferrer;
}
}
saveReferrer();
showReferrer();●注意点と対処法
Cookieを使用する際には、次の注意点に留意してください。
- Cookieの容量制限：Cookieには、約4KBのデータサイズ制限があります。
大量のデータを保存する際は、ローカルストレージやセッションストレージを検討してください。 - セキュリティ：Cookieは第三者によって盗み見られる可能性があるため、機密情報の保存には適していません。
機密情報を扱う場合は、セキュアな方法を検討してください。
●カスタマイズ方法
JavaScript Cookieをカスタマイズする際は、下記の方法があります。
- 有効期限の変更：Cookieの有効期限を変更することで、データの保存期間を調整できます。
- パスやドメインの指定：特定のパスやドメインに対してのみ、Cookieを有効にすることができます。
まとめ
この記事では、JavaScriptを使用してCookieを操作する方法とその応用例を紹介しました。
注意点やカスタマイズ方法にも触れましたので、これらを参考に、自分のプロジェクトに適した実装を行ってください。
