Introduction

The first thing to know is that jQuery itself does not include a cookie API. If you see code like $.cookie(...), that comes from a plugin, not from jQuery core. In modern code, the practical choices are either document.cookie directly or a small dedicated library such as js-cookie.

Setting a Cookie with Native JavaScript

Cookies are really a browser feature, not a jQuery feature, so the native API is the base layer.

document.cookie = "theme=dark; path=/; max-age=604800; SameSite=Lax";

This sets a cookie named theme with value dark that:

• is valid across the whole site because of path=/
• lasts 7 days because max-age=604800
• uses SameSite=Lax

If you want to do this from a jQuery click handler, that is fine. jQuery just handles the event, not the cookie storage.

$("#save-theme").on("click", function () {
  document.cookie = "theme=dark; path=/; max-age=604800; SameSite=Lax";
});

Unsetting a Cookie

To delete a cookie, overwrite it with an expiration in the past or max-age=0.

document.cookie = "theme=; path=/; max-age=0; SameSite=Lax";

The critical detail is that the delete operation must match the same path and, when relevant, the same domain that were used when the cookie was created.

If the cookie was originally set with path=/app, deleting it with path=/ may fail silently because the browser sees them as different scopes.

Reading Cookies

The native API for reading cookies is less pleasant because all cookies come back as one string.

1function getCookie(name) {
2  const cookies = document.cookie.split("; ");
3  for (const cookie of cookies) {
4    const [key, value] = cookie.split("=");
5    if (key === name) {
6      return decodeURIComponent(value);
7    }
8  }
9  return null;
10}
11
12console.log(getCookie("theme"));

This is one reason libraries became popular.

Using a Cookie Library Instead

If you want cleaner syntax, use a dedicated cookie helper library. A modern example is js-cookie.

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

Set a cookie:

Cookies.set("theme", "dark", { expires: 7, path: "/", sameSite: "Lax" });

Read a cookie:

console.log(Cookies.get("theme"));

Delete a cookie:

Cookies.remove("theme", { path: "/" });

This is much clearer than hand-parsing document.cookie.

What About $.cookie()?

Older tutorials often show the jQuery Cookie Plugin:

$.cookie("theme", "dark", { expires: 7, path: "/" });
$.removeCookie("theme", { path: "/" });

That syntax existed, but it was never part of jQuery itself. If you have legacy code using it, the answer is usually:

• keep the plugin if you must maintain old code carefully
• prefer a modern cookie helper or the native API for new code

The main conceptual fix is to stop thinking of cookie handling as a built-in jQuery feature.

Security and Attribute Basics

When setting cookies, think about the attributes deliberately.

Useful attributes include:

• 'path to control where the cookie is sent'
• 'domain when subdomain sharing is intended'
• 'max-age or expires for persistence'
• 'SameSite for CSRF-related behavior'
• 'Secure for HTTPS-only transmission'

Example:

document.cookie = "sessionPref=compact; path=/; max-age=86400; SameSite=Strict; Secure";

Remember that HttpOnly cannot be set from JavaScript. That attribute must be sent by the server.

A Practical jQuery Example

If your page already uses jQuery for interactions, combine it with native cookie logic cleanly.

1$("#dismiss-banner").on("click", function () {
2  document.cookie = "bannerDismissed=yes; path=/; max-age=2592000; SameSite=Lax";
3  $("#banner").hide();
4});

This is a perfectly valid “with jQuery” solution even though the actual cookie operation is not a jQuery API call.

Common Pitfalls

The biggest pitfall is assuming jQuery core provides $.cookie(). It does not.

Another issue is failing to match the original path or domain when deleting a cookie, which makes the removal appear broken.

Developers also sometimes forget to URL-encode values that may contain special characters.

Finally, do not put sensitive client-controlled state in JavaScript-set cookies and assume it is secure. Browser cookies are part of the request surface and need proper attribute choices and server-side validation.

Summary

• jQuery itself does not have a built-in cookie API.
• Use document.cookie directly or a dedicated helper library such as js-cookie.
• Delete a cookie by setting max-age=0 or an expired date with the same scope attributes.
• If you see $.cookie(...), that comes from an old plugin, not from jQuery core.
• Be deliberate about path, domain, SameSite, and Secure when managing cookies in real applications.