Tutorials

JavaScript Cookies Update

Posted in JavaScript Tutorial

Updated on Nov 25, 2024

By Mari Selvan

👁️ 36 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

Introduction

Cookies are small pieces of data that are stored on a user's device by the web browser. They are primarily used to store session information, user preferences, or tracking data.

JavaScript allows developers to create, read, update, and delete cookies to manage client-side data efficiently. In this page, we focus on how to update existing cookies using JavaScript.

What Are Cookies?

Cookies are small text files that store information in key-value pairs. They are sent from the server and stored on the client-side by the browser. Cookies are sent back to the server with each HTTP request, allowing the server to maintain a session or track certain behaviors across page visits.

Creating and Reading Cookies

To set or read cookies, JavaScript interacts with the document.cookie property. Here's how you create and read cookies in JavaScript:

JavaScript

Copied

// Create a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

// Read cookies
console.log(document.cookie); // Output: "username=JohnDoe"

How to Update Cookies

Updating a cookie in JavaScript is done by overwriting the existing cookie with the same key. You simply set the cookie with the same name, and the browser will update it with the new value or attributes.

JavaScript

Copied

// Update the 'username' cookie
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

// Confirm the update
console.log(document.cookie); // Output: "username=JaneDoe"

To update a cookie:

Use the same key name as the cookie you want to update.
Modify the value or any of its attributes such as expiration, path, or secure flag.

Cookie Expiration and Path

When updating a cookie, ensure you specify the correct path and expiration date. If you omit these, the cookie might not be updated as expected. The expiration date should be set in UTC format, and the path determines which part of your website the cookie is accessible from.

JavaScript

Copied

// Update the 'username' cookie with a new expiration date
document.cookie = "username=JaneDoe; expires=Sat, 31 Dec 2025 12:00:00 UTC; path=/";

// Setting a specific path
document.cookie = "username=JaneDoe; expires=Sat, 31 Dec 2025 12:00:00 UTC; path=/account";

Common Pitfalls

Missing Expiration: If you don’t set the expiration date when updating a cookie, it will become a session cookie and expire when the browser is closed.
Path Mismatch: If the path specified during the update doesn’t match the path of the existing cookie, the update may not work as expected.
Browser Limitations: Some browsers have limits on the number of cookies or the size of a cookie. If your cookie exceeds these limits, updates may fail.

Example

Here’s a practical example that shows how to update a user’s session preference stored in a cookie:

HTML

Copied

<!DOCTYPE html>
<html>
<head>
  <title>Update Cookie Example</title>
</head>
<body>
  <h1>Update Cookie Example</h1>
  <button id="updateCookie">Update Cookie</button>

  <script>
    // Initial cookie
    document.cookie = "theme=light; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

    // Function to update the cookie
    document.getElementById('updateCookie').addEventListener('click', function() {
      document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
      alert('Cookie updated to dark theme!');
    });

    // Output the updated cookie
    console.log(document.cookie); // Output: theme=dark
  </script>
</body>
</html>

Conclusion

Updating cookies in JavaScript is as simple as re-setting the cookie with the same name and desired changes. Whether you're updating values, expiration dates, or paths, cookies provide a lightweight way to manage session data and user preferences. However, be mindful of the limitations around cookie size and browser behavior to ensure a smooth user experience.