Cookies are small pieces of data stored in the user's browser. They are commonly used to remember user preferences, maintain login sessions, store authentication tokens (carefully), and track user activity.

📌 What are Cookies?

A cookie is a small text value that a website stores in the browser. Every time the browser sends a request to the same website, the cookie is automatically included in the request (subject to its settings).

💡 Why Use Cookies?

🍪 Cookie Syntax

Cookies are managed using the document.cookie property.

document.cookie = "username=John";

The cookie is stored as a string in the browser.

📝 Creating a Cookie

document.cookie = "username=John";

This creates a session cookie, which is removed when the browser closes.

📖 Reading Cookies

console.log(document.cookie);

If multiple cookies exist, they are returned as a semicolon-separated string.

username=John; theme=dark; language=en

✏️ Updating a Cookie

To update a cookie, assign a new value using the same cookie name.

document.cookie = "username=Alice";

🗑️ Deleting a Cookie

Cookies are deleted by setting their expiration date to a time in the past.

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

⏳ Cookie Expiration

You can specify how long a cookie should remain stored.

document.cookie =
  "username=John; expires=Fri, 31 Dec 2027 23:59:59 UTC; path=/";

📂 Cookie Path

The path attribute controls where the cookie is accessible.

document.cookie =
  "theme=dark; path=/";

Setting path=/ makes the cookie available across the entire website.

🔒 Secure Cookies

Security attributes help protect cookies from unauthorized access.

document.cookie =
  "theme=dark; Secure; SameSite=Strict";

🛠️ Helper Functions

Set Cookie

function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);

  document.cookie =
    name +
    "=" +
    encodeURIComponent(value) +
    "; expires=" +
    date.toUTCString() +
    "; path=/";
}

Get Cookie

function getCookie(name) {
  const cookies = document.cookie.split(";");

  for (let cookie of cookies) {
    const c = cookie.trim();

    if (c.startsWith(name + "=")) {
      return decodeURIComponent(c.substring(name.length + 1));
    }
  }

  return null;
}

Delete Cookie

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

🚀 Example

setCookie("username", "John", 7);

console.log(getCookie("username"));

deleteCookie("username");

📊 Cookie vs Local Storage vs Session Storage

⚠️ Best Practices

🎯 Summary

JavaScript cookies allow websites to store small amounts of information in the browser. You can create, read, update, and delete cookies usingdocument.cookie. While cookies are useful for sessions and user preferences, modern web applications often use localStorage orsessionStorage for client-side data that does not need to be sent with every HTTP request.