Cookies in JavaScript

What Are Cookies?

Cookies are small pieces of data stored on a user’s computer. Think of them as sticky notes that a website leaves in your browser to remember things about you. These notes are limited in size (under 4KB) and are sent with every HTTP request, ensuring the server and browser stay in sync.

What Are Cookies Used For?

Cookies have been around since the early days of the web and remain widely used for tasks such as:

• Maintaining user sessions, such as keeping users logged in after they authenticate.
• Tracking user preferences, like a preferred language or theme.
• Personalizing experiences on e-commerce sites by remembering search or purchase histories.
• Facilitating targeted advertising by tracking browsing behavior across websites.

Cookies can either be session cookies, which disappear when the browser is closed, or persistent cookies, which last until a specified expiration date.

Creating a Cookie in JavaScript

Cookies are managed using the document.cookie property. You can assign a key-value pair to create a cookie:

// Create a cookie
document.cookie = "favoriteCat=million";

// Add another cookie
document.cookie = "favoriteDog=bambi";

// View all cookies
console.log(document.cookie);
// Output: "favoriteCat=million; favoriteDog=bambi"
            

Each cookie is stored as a string in the format key=value. Additional cookies are appended, separated by semicolons.

Analogy: Imagine leaving sticky notes on a fridge for different family members. Each note has a title (key) and content (value), and the notes are kept together for easy access.

Deleting a Cookie

Deleting a cookie involves setting its expiration date to a point in the past. This ensures the browser removes the cookie.

// Create a cookie
document.cookie = "favoriteCat=million";
console.log(document.cookie); // Output: "favoriteCat=million"

// Delete the cookie
document.cookie = "favoriteCat=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
console.log(document.cookie); // Output: ""
            

Once the expiration date is set to a past date, the browser automatically deletes the cookie.

Viewing and Managing Cookies with Developer Tools

You can view and manage cookies directly in your browser's developer tools:

1. Open the Developer Tools (F12 or Ctrl+Shift+I).
2. Navigate to the "Application" tab in Chrome or the "Storage" tab in Firefox.
3. Under "Cookies," select the current website to view stored cookies.
4. To delete a cookie, highlight it and click the delete button (Chrome) or right-click and select "Delete" (Firefox).

Example: On an e-commerce site like Amazon, adding an item to your cart often uses cookies. If you delete those cookies and refresh the page, the cart will be empty because the site no longer remembers your session.

Key Takeaways

• Cookies store small pieces of data in the browser and are sent with every HTTP request.
• Session cookies last only as long as the browser is open, while persistent cookies have expiration dates.
• Use document.cookie to create, view, or delete cookies in JavaScript.
• Developer tools provide an easy way to inspect and delete cookies for any website.

By mastering cookies, you can manage user sessions, preferences, and other stateful data effectively in your web applications.