How to Set, Retrieve, and Update Cookies Using JavaScript

Cookies are small pieces of data stored on the client’s browser, often used for session management, user preferences, and tracking. JavaScript provides straightforward methods to set, retrieve, and manage cookies. This article explains how to work with cookies effectively using JavaScript.

What Are Cookies in JavaScript?

Cookies are stored in key-value pairs and sent to the server with every HTTP request. You can manipulate cookies directly in JavaScript through the document.cookie property.

How to Set Cookies in JavaScript

You can create a cookie by assigning a string to the document.cookie property. Here’s a basic example:

1 document.cookie = "username=JohnDoe; expires=Fri, 12 Jan 2025 12:00:00 UTC; path=/";

Breaking Down the Cookie String:

• username=JohnDoe: The key-value pair stored in the cookie.
• expires: The expiration date (optional). Without it, the cookie will be deleted when the browser closes.
• path: The scope of the cookie. / makes it accessible across the entire site.

How to Retrieve Cookies in JavaScript

You can access cookies using document.cookie, which returns all cookies as a single string:

1 console.log(document.cookie); 
2 // Output: "username=JohnDoe; theme=dark"

To retrieve a specific cookie, you can parse the string:

1 function getCookie(name) {
2   const cookies = document.cookie.split('; ');
3   for (let cookie of cookies) {
4     const [key, value] = cookie.split('=');
5     if (key === name) {
6       return value;
7     }
8   }
9   return null;
10 }
11 
12 console.log(getCookie('username')); // Output: "JohnDoe"

How to Update Cookies

To update a cookie, simply set it again with the same name but a new value:

1 document.cookie = "username=JaneDoe; expires=Fri, 12 Jan 2025 12:00:00 UTC; path=/";

How to Delete Cookies

To delete a cookie, set its expiration date in the past:

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

Best Practices for Using Cookies

1. Limit Sensitive Data: Avoid storing sensitive information in cookies. Use session storage or server-side solutions instead.
2. Set Secure Attributes:

• Use the Secure attribute to ensure cookies are only sent over HTTPS.
• Add the HttpOnly flag to prevent client-side JavaScript from accessing cookies.

1. Use SameSite: Prevent cross-site request forgery (CSRF) by setting the SameSite attribute.

1 document.cookie = "theme=dark; SameSite=Strict";

Example: Setting and Retrieving Cookies

1 // Set a cookie
2 document.cookie = "theme=dark; expires=Fri, 12 Jan 2025 12:00:00 UTC; path=/";
3 
4 // Retrieve the cookie
5 function getCookie(name) {
6   const cookies = document.cookie.split('; ');
7   for (let cookie of cookies) {
8     const [key, value] = cookie.split('=');
9     if (key === name) {
10       return value;
11     }
12   }
13   return null;
14 }
15 
16 console.log(getCookie('theme')); // Output: "dark"

Conclusion

Cookies are a powerful tool for maintaining state and enhancing user experiences in web applications. By understanding how to set, retrieve, and manage cookies in JavaScript, you can leverage this feature to create more dynamic and personalized applications.