JavaScriptのCookieを完全解説！使い方10選

はじめに
●JavaScript
- ○Cookieの基本概念
●JavaScript Cookieの使い方
●JavaScript Cookieの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、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は第三者によって盗み見られる可能性があるため、機密情報の保存には適していません。
機密情報を扱う場合は、セキュアな方法を検討してください。