JavaScript

Cookies are small pieces of data stored in the user’s browser. They help websites remember information (like login sessions, preferences, or cart items).

---

📌 What is a Cookie?

A cookie is a key-value pair stored in the browser, sent to the server with every request.
Example:

username=devin; expires=Sun, 14 Apr 2025 12:00:00 UTC;

---

🔹 1. Create/Set a Cookie

Use document.cookie to create a cookie.

✅ Syntax:

document.cookie = "key=value; expires=date; path=/";

✅ Example:

document.cookie = "username=devin; expires=Fri, 01 May 2025 12:00:00 UTC; path=/";

• username is the key.
• devin is the value.
• expires sets the expiration date.
• path=/ makes it available across the entire site.

---

🔹 2. Read/Get Cookies

Use document.cookie to read all cookies stored in the current domain/page.

✅ Example:

console.log(document.cookie); 
// Output: username=devin

You can split and parse the cookies:

let cookies = document.cookie.split("; ");
cookies.forEach(cookie => {
  let [key, value] = cookie.split("=");
  console.log(key, value);
});

---

🔹 3. Update a Cookie

To update a cookie, set it again with the same key but a new value.

✅ Example:

document.cookie = "username=wildz; expires=Fri, 01 May 2025 12:00:00 UTC; path=/";

---

🔹 4. Delete a Cookie

Set the expires date to a past time.

✅ Example:

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

---

💡 Example: Set, Read, Delete Cookie with Buttons

<button onclick="setCookie()">Set Cookie</button>
<button onclick="getCookie()">Get Cookie</button>
<button onclick="deleteCookie()">Delete Cookie</button>

<script>
  function setCookie() {
    document.cookie = "user=Devin; expires=Fri, 1 May 2025 12:00:00 UTC; path=/";
    alert("Cookie has been set.");
  }

  function getCookie() {
    alert("Cookies: " + document.cookie);
  }

  function deleteCookie() {
    document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
    alert("Cookie has been deleted.");
  }
</script>

---

⚠️ Limitations of Cookies

• Max size ~4KB per cookie
• Sent with every HTTP request (affects performance)
• Can be disabled by users
• Not secure by default (no encryption)

---

✅ Summary Table

Task	Code Example
Set Cookie	document.cookie = "name=value; expires=date; path=/"
Get Cookies	document.cookie
Delete Cookie	Set expires to a past date
Update Cookie	Set again with the same name

---