JavaScript Cookies

A cookie is a small piece of data stored in the user's browser.

Websites use cookies to:

• Remember login information
• Save user preferences (like dark mode)
• Track user activity
• Store temporary session data

Cookies are stored as name=value pairs.

Example of a simple cookie:

username=Alice

1️⃣ What Is a Cookie?

A cookie is a small piece of data stored in the user's browser.

Websites use cookies to:

• Remember login information
• Save user preferences (like dark mode)
• Track user activity
• Store temporary session data

Cookies are stored as name=value pairs.

Example of a simple cookie:

username=Alice

2️⃣ How JavaScript Works with Cookies

In JavaScript, cookies are handled using:

document.cookie

Important:

• document.cookie does NOT show cookies like an object.
• It returns all cookies as a single string.

3️⃣ Storing (Setting) a Cookie

To set a cookie:

document.cookie = "username=Alice";

But usually, you also set:

• expires → when the cookie should expire
• path → where the cookie is accessible

Example with expiration:

let date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
let expires = "expires=" + date.toUTCString();

document.cookie = "username=Alice;" + expires + ";path=/";

Explanation:

• setTime() → sets expiration time
• toUTCString() → required date format
• path=/ → cookie accessible throughout entire website

4️⃣ Reading a Cookie

When you use:

console.log(document.cookie);

You might get something like:

username=Alice; theme=dark

To read a specific cookie:

function getCookie(name) {
  let decoded = decodeURIComponent(document.cookie);
  let cookies = decoded.split(";");

  for (let i = 0; i < cookies.length; i++) {
    let c = cookies[i].trim();
    if (c.indexOf(name + "=") === 0) {
      return c.substring(name.length + 1);
    }
  }
  return "";
}

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

Explanation:

• split(";") → separates multiple cookies
• substring() → extracts cookie value

5️⃣ Updating a Cookie

To update a cookie, simply set it again with a new value:

document.cookie = "username=Bob;path=/";

The browser replaces the old value.

6️⃣ Deleting a Cookie

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

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

Since the date is expired, the browser removes it. How JavaScript Works with Cookies

In JavaScript, cookies are handled using:

document.cookie

Important:

• document.cookie does NOT show cookies like an object.
• It returns all cookies as a single string.

3️⃣ Storing (Setting) a Cookie

To set a cookie:

document.cookie = "username=Alice";

But usually, you also set:

• expires → when the cookie should expire
• path → where the cookie is accessible

Example with expiration:

let date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
let expires = "expires=" + date.toUTCString();

document.cookie = "username=Alice;" + expires + ";path=/";

Explanation:

• setTime() → sets expiration time
• toUTCString() → required date format
• path=/ → cookie accessible throughout entire website

4️⃣ Reading a Cookie

When you use:

console.log(document.cookie);

You might get something like:

username=Alice; theme=dark

To read a specific cookie:

function getCookie(name) {
  let decoded = decodeURIComponent(document.cookie);
  let cookies = decoded.split(";");

  for (let i = 0; i < cookies.length; i++) {
    let c = cookies[i].trim();
    if (c.indexOf(name + "=") === 0) {
      return c.substring(name.length + 1);
    }
  }
  return "";
}

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

Explanation:

• split(";") → separates multiple cookies
• substring() → extracts cookie value

5️⃣ Updating a Cookie

To update a cookie, simply set it again with a new value:

document.cookie = "username=Bob;path=/";

The browser replaces the old value.

6️⃣ Deleting a Cookie

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

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

Since the date is expired, the browser removes it.

Compilation of Entire Code

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Cookies Example</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    input { padding: 8px; margin: 5px; }
    p { font-size: 18px; color: darkblue; }
  </style>
</head>
<body>

  <h1>JavaScript Cookies Demo</h1>

  <input type="text" id="username" placeholder="Enter your name">
  
  <button onclick="setUser()">Set Cookie</button>
  <button onclick="getUser()">Get Cookie</button>
  <button onclick="deleteUser()">Delete Cookie</button>

  <p id="demo">Cookie result will appear here</p>

  <script>
    function setUser() {
      let name = document.getElementById("username").value;
      let date = new Date();
      date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
      let expires = "expires=" + date.toUTCString();
      document.cookie = "username=" + name + ";" + expires + ";path=/";
      document.getElementById("demo").innerHTML = "Cookie set for " + name;
    }

    function getCookie(name) {
      let decoded = decodeURIComponent(document.cookie);
      let cookies = decoded.split(";");
      for (let i = 0; i < cookies.length; i++) {
        let c = cookies[i].trim();
        if (c.indexOf(name + "=") === 0) {
          return c.substring(name.length + 1);
        }
      }
      return "";
    }

    function getUser() {
      let user = getCookie("username");
      if (user !== "") {
        document.getElementById("demo").innerHTML = "Welcome back, " + user;
      } else {
        document.getElementById("demo").innerHTML = "No cookie found.";
      }
    }

    function deleteUser() {
      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      document.getElementById("demo").innerHTML = "Cookie deleted.";
    }
  </script>

</body>
</html>