Lesson 54 - JavaScript Cookies

Cookies are small pieces of data stored in the browser, often used for user authentication, session tracking, and storing preferences.

Why Use Cookies?

• Store user preferences (e.g., dark mode).
• Keep users logged in.
• Track user activity across pages.

Creating a Cookie

To set a cookie, assign a name-value pair to document.cookie:

document.cookie = "username=JohnDoe";

Setting Expiration Date

By default, cookies expire when the browser closes. You can set an expiration date using expires or max-age:

document.cookie = "username=JohnDoe; expires=Fri, 01 Jan 2026 12:00:00 UTC";
document.cookie = "theme=dark; max-age=3600"; // 1 hour

Reading Cookies

All cookies for a site are stored in document.cookie:

console.log(document.cookie);

• Returns a string of all cookies, separated by ;. You’ll need to parse it manually.

Deleting a Cookie

Set the expiration date to the past:

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

Example: Setting and Getting a Cookie

// Set a cookie
document.cookie = "user=Alice; max-age=86400"; // 1 day

// Read and display cookies
console.log("Cookies: " + document.cookie);

Try Your Hand

1. Set a cookie to store the user’s preferred language.
2. Retrieve and display the stored cookie.
3. Delete the cookie after the user logs out.

Key Takeaways

• document.cookie stores cookies as a string.
• Cookies can have an expiration time.
• You must parse cookies manually to access specific values.