Understanding How to Set Cookies in JavaScript

Understanding How to Set Cookies in JavaScript

Blog Article

What is a Cookie in JavaScript?
A cookie in JavaScript is a small piece of data stored on a user's computer that can be retrieved by both the client-side (browser) and server. Cookies are commonly used to store session data, preferences, or authentication tokens. They allow websites to remember information about users between page reloads, making the browsing experience more personalized.

Why Set Cookies in JavaScript?
Setting cookies in JavaScript is essential for websites that need to track user activity or store state across multiple visits. For example, when you log into a website, cookies can store your authentication token so that you don't need to log in again each time you visit. Similarly, cookies are useful for storing user preferences like language or theme selection, improving the user experience.

How to Set a Cookie in JavaScript?
Setting a javascript set cookie is simple using the document.cookie property. The syntax for setting a cookie is as follows:

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

This sets a cookie with the name username, the value JohnDoe, an expiration date, and a path (which determines the scope of the cookie). In this case, the cookie will be available throughout the entire website.

Setting Expiry Date for Cookies
When setting cookies in JavaScript, you can specify an expiration date using the expires attribute. If you do not set an expiration date, the cookie will be considered a session cookie and will be deleted once the browser is closed. To make cookies persistent, you should define a specific expiration date, as shown in the previous example, which uses the expires attribute to set the cookie's lifespan.

Cookie Security and Attributes
It is important to consider cookie security. For sensitive data, you should use the Secure flag to ensure that the cookie is only sent over secure HTTPS connections. The HttpOnly flag is also recommended for cookies that store sensitive data, such as session tokens, as it prevents access to the cookie via JavaScript. Additionally, the SameSite attribute can help prevent cross-site request forgery (CSRF) attacks by controlling when cookies are sent in cross-site requests.

Reading and Modifying Cookies in JavaScript
Once a cookie is set, you can access it via document.cookie. However, keep in mind that document.cookie returns all cookies as a single string, which requires parsing to retrieve individual cookies. Here’s how you can read and parse cookies:

function getCookie(name) {

  let nameEQ = name + "=";

  let ca = document.cookie.split(';');

  for (let i = 0; i < ca.length; i++) {

    let c = ca[i].trim();

    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);

  }

  return null;

}

This function allows you to retrieve the value of a specific cookie by name.

Conclusion
Setting and managing cookies in JavaScript is an important skill for creating dynamic web applications that rely on client-side data storage. By using cookies, you can enhance the user experience through personalized content and persistent session information. However, it's crucial to implement secure practices when dealing with cookies, especially when handling sensitive data. Always make sure your cookies are properly configured for security and privacy.

Report this page