Cookies in JavaScript

JavaScript cookies are small, powerful tools that allow web developers to store and manage information directly in the user's browser. They help websites remember important details about users, such as login states, shopping cart items, or preferences like dark mode. Understanding how cookies work is essential for creating interactive and personalized web experiences. This guide walks you through the basics of cookies, from their functionality to best practices, making it beginner-friendly and easy to follow.

In this section, we’ll cover the following topics:

What is Cookies?

Cookies are small text files that websites store in a user's browser. These files contain key-value pairs of data, like theme=dark or username=JohnDoe, which are used to remember information about the user across sessions. For example, if you log in to a website, a cookie might store your session ID, allowing the website to identify you when you return.

Cookies are essential for making the web user-friendly, enabling functionalities like auto-login, saved settings, and cart persistence in e-commerce.

Why Choose Cookies Over Local Storage and Session Storage?

JavaScript provides multiple ways to store data on the client-side: cookies, local storage, and session storage. Each has unique characteristics, but cookies offer distinct advantages that make them the preferred choice in certain scenarios.

• Persistent Communication with the Server: Cookies are automatically sent with every HTTP request to the server, enabling seamless server-side processing. In contrast, local storage and session storage only exist on the client-side, so any data they contain must be sent manually using AJAX or other methods.
• Cross-Session Persistence: Cookies can persist across browser sessions and tabs by setting expiration dates. Local storage is also persistent, but session storage is cleared once the browser tab is closed.
• HttpOnly and Secure Attributes: Cookies support HttpOnly and Secure attributes, which enhance security by making cookies inaccessible to JavaScript and ensuring they are transmitted only over HTTPS. Local and session storage do not offer such security measures.
• Use Cases Requiring Server Interaction: For tasks like session management or user authentication, cookies are essential because they allow servers to verify users without requiring additional code to send client-side data.
• Client-Side Benefits of Cookies: Even when used solely on the client-side, cookies provide advantages like automatic expiration, domain and path restrictions, and compatibility with legacy browsers. These features make them useful for lightweight, secure, and controlled storage needs.
• Local Storage: Ideal for storing larger amounts of data that don't need to be sent to the server, like caching large application configurations.
• Session Storage: Best for storing temporary data within a single browser session, such as form inputs before submission.

When to Use Local Storage or Session Storage?

Cookies remain a strong choice for scenarios involving both client-side and server-side interactions, making them a unique and versatile option compared to the alternatives.

How Do Cookies Work in Web Development?

Cookies work by storing data in the browser and sending it back to the server with every HTTP request. Here’s how the process works step-by-step:

Creating a Cookie

When a server wants to store information, it sends an HTTP header called Set-Cookie with the data. For example:

Set-Cookie: sessionID=abc123; HttpOnly; Secure; Path=/

This tells the browser to save the cookie with the name sessionID and the value abc123.

Sending Cookies to the Server

Every time the browser makes a request to the same server, it automatically includes the stored cookies in the Cookie HTTP header. For example:

Cookie: sessionID = abc123;

Accessing Cookies in JavaScript

On the frontend, you can interact with cookies using document.cookie. However, this only provides access to non-HTTP-only cookies.

Backend Interactions

On the backend, cookies play a crucial role. They are used to:

• Validate sessions (e.g., checking if the sessionID is valid).
• Authenticate users securely.
• Restrict access to certain parts of the site based on roles or permissions.
• Track user behavior across visits.

For example, a server might decode a cookie to verify if a user has permission to access a specific page.

Frontend vs Backend in Cookie Functionality

While you can demonstrate basic functionalities like creating, reading, and deleting cookies entirely on the frontend using JavaScript, the full potential of cookies often requires a backend. Here's why:

• Frontend-only Cookies: Useful for simple tasks like saving preferences or displaying messages.
• Backend-required Cookies: Necessary for secure tasks like login authentication, user tracking, and cross-domain functionality.

In a full-stack application, cookies enable seamless communication between the browser and the server.

How to Use Cookies in JavaScript

JavaScript provides a straightforward way to manage cookies through the document.cookie property. You can use it to create, read, and delete cookies without requiring a backend.

Reading Cookies with document.cookie

The document.cookie property allows you to retrieve all cookies stored for the current domain. It returns a single string containing all cookies as key-value pairs:

// Example: Reading all cookies
console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark"

You can split the string to parse individual cookie values:

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: "JohnDoe"

Creating and Setting Cookies

To create or update a cookie, assign a string to document.cookie. You can include additional options like expiration date, path, or domain:

// Setting a cookie
document.cookie =
  "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Setting multiple cookies
document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

Modifying and Deleting Cookies

To modify a cookie, set a new value with the same key. To delete a cookie, set its expiration date to a past date:

// Modifying a cookie
document.cookie =
  "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

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

Implementing Cookies with AI Assistance

Cookies are a foundational feature in web development, and understanding how to implement them can open up numerous possibilities for enhancing user experiences. This section provides a practical, hands-on guide to working with cookies, complete with AI-assisted code samples and case studies. By following these steps, you'll gain confidence in implementing cookies in various scenarios.

Preparing for Practice Files
This course takes a hands-on approach, allowing you to apply the techniques covered in real-world scenarios. We'll be using a structured folder layout. Before proceeding with the examples, please ensure the following files are prepared:

/your-project-folder/  
  |─10-03-cookies/ (<- sub-folder)  
    |─ example-1.css  
    |─ example-1.html  
    |─ example-1.js

For your convenience, these files are also available on our GitHub repository.

AI Case: Welcome Back Message with 1-Minute Expiration

In this case study, you'll learn how to create a simple "Welcome Back" message that remembers a user's visit and displays a personalized greeting. The cookie storing the user's last visit will expire after one minute, demonstrating cookies' automatic expiration feature.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome Back</title>
    <link rel="stylesheet" href="example-1.css" />
  </head>
  <body>
    <h1>Welcome to Our Website</h1>
    <p id="message"></p>
    <script src="example-1.js"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
}

h1 {
  color: #333;
}

#message {
  font-size: 1.2em;
}

.welcome {
  color: #28a745; /* Green for the initial welcome message */
}

.welcome-back {
  color: #007bff; /* Blue for the welcome back message */
}

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

function setCookie(name, value, minutes) {
  const date = new Date();
  date.setTime(date.getTime() + minutes * 60 * 1000); // 1 minute in milliseconds
  document.cookie = `${name}=${encodeURIComponent(
    value
  )}; expires=${date.toUTCString()}; path=/`;
}

function displayWelcomeMessage() {
  const lastVisit = getCookie("lastVisit");
  const now = new Date().toLocaleString();
  const messageElement = document.getElementById("message");

  if (lastVisit) {
    messageElement.textContent = `Welcome back! Your last visit was on ${lastVisit}.`;
    messageElement.className = "welcome-back"; // Apply blue styling for "Welcome Back"
  } else {
    messageElement.textContent =
      "Welcome to our website! We're glad you're here.";
    messageElement.className = "welcome"; // Apply green styling for the first welcome
  }

  setCookie("lastVisit", now, 1); // Cookie expires in 1 minute
}

window.addEventListener("load", displayWelcomeMessage);

Instructions to see the results:

Save the code above in their respective files. Open the HTML file in your browser.

On the first visit, you'll see:

"Welcome to our website! We're glad you're here." (green color)

Refresh the page within 1 minute to see:

"Welcome back! Your last visit was on [time]." (blue color)

Wait for 1 minute, then refresh the browser again to test cookie expiration.

The message will revert to:

"Welcome to our website! We're glad you're here." (green color)

To see how the code works, you can also check out the link below.

Demo Web Page 44

Best Practices for Using Cookies

Cookies are powerful but need to be used carefully. Here are some best practices to follow:

• Limit Sensitive Data: Never store sensitive information like passwords in cookies. Instead, use secure tokens or other methods.
• Use Secure and HttpOnly Flags: Ensure cookies are sent only over HTTPS and cannot be accessed via JavaScript by setting the Secure and HttpOnly attributes.
• Specify Expiry and Scope: Define expiration dates and restrict the path or domain to limit where the cookie is accessible.
• Keep Cookies Small: Cookies have size limits (usually 4KB). Store only essential data to avoid performance issues.
• Encrypt Sensitive Values: If you must store sensitive information, encrypt it before saving it in a cookie.

By following these best practices, you can ensure that cookies are used securely and effectively.

Reference links:

MDN Web Docs on Cookies