jQueryでCookieを操作する完全ガイド｜設定・取得・削除・js-cookieライブラリまで

CookieはWebブラウザにデータを保存する仕組みで、ログイン状態の維持やユーザー設定の記憶に使われます。本記事ではjQueryと連携したCookieの設定・取得・削除の方法から、モダンな js-cookie ライブラリ・ローカルストレージとの使い分けまで丁寧に解説します。

1. jQueryにはCookie操作の組み込みAPIがない

重要な前提として、jQueryにはCookieを直接操作するAPIがありません。以前は $.cookie() プラグインが存在しましたが現在は非推奨です。Cookieを扱う場合は以下の2択が現実的です：

1. バニラJS（document.cookie）で実装する
2. js-cookie（軽量ライブラリ）を使う

jQueryと組み合わせてDOM操作はjQuery、Cookie操作はjs-cookieというのが実務でよく使われるパターンです。

2. バニラJSでCookieを操作する

ライブラリなしの基本実装です。関数にまとめることで使いやすくなります。

// ---- Cookie ユーティリティ関数 ----

// Cookieをセット
// name: 名前, value: 値, days: 有効日数（省略で セッションCookie）
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
}

// Cookieを取得
function getCookie(name) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var parts = cookies[i].split("=");
    if (parts[0] === name) {
      return decodeURIComponent(parts.slice(1).join("="));
    }
  }
  return null;
}

// Cookieを削除（過去の日付にセットするだけ）
function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

使い方

// 設定：30日間有効
setCookie("username", "taro", 30);

// 取得
var name = getCookie("username");
console.log(name);  // "taro"

// 削除
deleteCookie("username");

3. js-cookieライブラリを使う（推奨）

軽量（約1KB）で使いやすい js-cookie が現在の主流です。バニラJSの複雑な文字列処理が不要で、日本語や特殊文字も自動エスケープします。

CDNで読み込む

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3/dist/js.cookie.min.js"></script>

基本操作

// 設定（セッションCookie）
Cookies.set("theme", "dark");

// 設定（7日間有効）
Cookies.set("username", "taro", { expires: 7 });

// 設定（パス・Secure・SameSite指定）
Cookies.set("token", "abc123", {
  expires: 1,
  path: "/",
  secure: true,
  sameSite: "Strict"
});

// 取得
var theme = Cookies.get("theme");       // "dark"
var all   = Cookies.get();              // 全Cookieをオブジェクトで取得

// 削除
Cookies.remove("theme");
Cookies.remove("token", { path: "/" }); // pathを指定して削除

4. jQueryと組み合わせた実用パターン

パターン1: ポップアップを「1日1回のみ表示」にする

$(function () {
  // Cookieがない場合のみポップアップを表示
  if (!Cookies.get("popup_closed")) {
    $('#popup').fadeIn(400);
  }

  // 閉じるボタンでCookieをセット
  $('#popup-close').on('click', function () {
    $('#popup').fadeOut(300);
    Cookies.set('popup_closed', '1', { expires: 1 });  // 1日間非表示
  });
});

パターン2: テーマ切り替えを記憶する

$(function () {
  // 保存されたテーマを復元
  var savedTheme = Cookies.get('theme') || 'light';
  $('body').attr('data-theme', savedTheme);

  $('#theme-toggle').on('click', function () {
    var current = $('body').attr('data-theme');
    var next    = current === "light" ? "dark" : "light";
    $('body').attr('data-theme', next);
    Cookies.set('theme', next, { expires: 365 });
  });
});

パターン3: フォームの入力値を一時保存する

$(function () {
  // ページロード時に保存値を復元
  var savedName = Cookies.get('form_name');
  if (savedName) $('#input-name').val(savedName);

  // 入力のたびに保存
  $('#input-name').on('input', function () {
    Cookies.set('form_name', $(this).val(), { expires: 1 });
  });
});

5. CookieとLocalStorage・SessionStorageの使い分け

6. Cookieのセキュリティ設定

// Secure: HTTPS経由のみ送信
// HttpOnly: JavaScriptからアクセス不可（サーバー側のみ設定可能）
// SameSite: CSRF対策
Cookies.set('token', 'abc123', {
  expires: 1,
  secure: true,       // HTTPS のみ
  sameSite: 'Strict'  // 'Strict' | 'Lax' | 'None'
});

まとめ

jQueryにはCookieのAPIがないため、バニラJSの document.cookie か js-cookie ライブラリを使います。実務では軽量で扱いやすい js-cookie が推奨です。データをサーバーに送る必要がある場合はCookie、ブラウザ内で完結する場合はLocalStorageの使い分けを意識しましょう。

関連記事: 一度だけ特定時間表示しないポップアップの作成方法 / アクセス時に一度だけ表示するポップアップの実装方法

よくある質問（FAQ）