A Comprehensive Guide to JavaScript Cookies

Cookies are an essential part of web development, enabling developers to store small amounts of data on the user's browser. They are commonly used for remembering user preferences, session management, and tracking purposes. JavaScript provides a straightforward way to work with cookies, offering the ability to create, read, and delete them.

This article explores what cookies are, their structure, and how to manage them effectively using JavaScript.

What Are Cookies?

Cookies are small text files stored on the user's browser by a website. They are sent to the server with every HTTP request, allowing the server to identify users and remember their preferences.

Key features of cookies

  1. Size Limit: Typically limited to 4 KB.
  2. Expiration: Cookies can have an expiration date or be session-based.
  3. Scope: Cookies are tied to a specific domain and path.

Structure of a Cookie

A cookie is a name-value pair with optional attributes. For example:

name=value; expires=Wed, 16 Jun 2025 12:00:00 UTC; path=/; domain=example.com; secure
  • name=value: The key-value pair of the cookie.
  • expires: Specifies the expiration date of the cookie.
  • path: Defines the scope (URL path) of the cookie.
  • domain: Specifies the domain for which the cookie is valid.
  • secure: Ensures the cookie is sent only over HTTPS.
  • HttpOnly: Makes the cookie inaccessible to JavaScript (for server-side security).

Working with Cookies in JavaScript

1. Creating Cookies

You can create a cookie by setting the document.cookie property:

document.cookie = "username=JohnDoe";

To set additional attributes, include them in the string:

document.cookie = "username=JohnDoe; expires=Wed, 16 Jun 2025 12:00:00 UTC; path=/";
Example: Setting a Cookie with an Expiration Date
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = "expires=" + date.toUTCString();
  document.cookie = `${name}=${value}; ${expires}; path=/`;
}
setCookie("user", "Alice", 7); // Sets a cookie valid for 7 days

2. Reading Cookies

The document.cookie property allows you to access all cookies as a single string:

console.log(document.cookie); // Outputs: "username=JohnDoe; user=Alice"

To read a specific cookie, you can parse the string:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}
console.log(getCookie("username")); // Outputs: "JohnDoe"

3. Deleting Cookies

To delete a cookie, set its expiration date to a past date:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

You can also create a utility function for deletion:

function deleteCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
}
deleteCookie("user");

Common Use Cases for Cookies

1. Remembering User Preferences

Cookies can store preferences like language, theme, or layout settings:

setCookie("theme", "dark", 30);
const theme = getCookie("theme");
document.body.className = theme ? theme : "light";

2. Session Management

Cookies are often used to track login sessions by storing session IDs.

setCookie("sessionID", "123456789", 1);

3. Analytics and Tracking

Cookies are used to track user behavior across pages and sessions, aiding in analytics and personalized recommendations.

Advantages of Cookies

  1. Persistence: Cookies can persist data between sessions.
  2. Browser Support: Supported by all major browsers.
  3. Easy to Use: Simple API for basic storage.

Limitations and Considerations

  1. Size Limit: Cookies are limited to 4 KB of data.
  2. Security: Cookies can be vulnerable to cross-site scripting (XSS) attacks. Use the HttpOnly and Secure attributes where possible.
  3. Performance: Excessive use of cookies can increase HTTP request size and affect performance.
  4. Privacy: Always comply with privacy regulations like GDPR when using cookies.

Alternatives to Cookies

  1. localStorage: Stores larger amounts of data (up to 5 MB) and is not sent with HTTP requests.
  2. sessionStorage: Similar to localStorage, but clears when the browser tab is closed.
  3. IndexedDB: A low-level API for complex structured data storage.

Conclusion

JavaScript cookies provide a simple way to store and manage small pieces of data on the client side. By understanding their structure, usage, and limitations, developers can use cookies effectively for tasks like session management, personalization, and analytics.

While cookies remain essential in web development, always prioritize security and comply with privacy laws to ensure a safe and user-friendly experience.

Next Article ❯