How to Set a Cookie with JavaScript

Cookies are small pieces of data stored on the client-side (browser) that can be accessed by the website. They are commonly used to remember user preferences, login status, and other information across different pages or sessions. In this article, we will guide you through setting a cookie using JavaScript.

What is a Cookie?

A cookie is a small text file stored on the user’s browser. It contains key-value pairs and other attributes like expiration date, path, domain, and security settings. Cookies are sent back to the server with each request, allowing the server to maintain stateful information about the user.

Steps to Set a Cookie with JavaScript

To set a cookie in JavaScript, you can use the document.cookie property. Here’s how you can do it:

1. Basic Cookie Creation

The simplest way to set a cookie is by assigning a string to document.cookie. The string should be in the format name=value.

// Set a cookie named 'username' with the value 'JohnDoe'
document.cookie = 'username=JohnDoe';

2. Adding Expiration Date

By default, cookies expire when the browser is closed. To make a cookie persistent, you need to set an expiration date using the expires attribute.

// Set the expiration date to 7 days from now
let expires = new Date();
expires.setDate(expires.getDate() + 7);

// Set a cookie with expiration
document.cookie = 'username=JohnDoe; expires=' + expires.toUTCString();

3. Specifying Path and Domain

You can restrict the cookie to a specific path or domain using the path and domain attributes.

// Set a cookie for the '/members' path and 'example.com' domain
document.cookie = 'username=JohnDoe; path=/members; domain=example.com';

4. Secure and SameSite Attributes

For security, you can set the secure and SameSite attributes. The secure attribute ensures the cookie is only sent over HTTPS, while SameSite prevents the cookie from being sent to other sites.

// Set a secure cookie with SameSite attribute
document.cookie = 'username=JohnDoe; secure; SameSite=Strict';

Example: Complete Cookie Implementation

Here’s a complete example that demonstrates setting a cookie with all the attributes:

function setCookie(name, value, days) {
  let expires = '';
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + value + expires + '; path=/';
}

// Usage
setCookie('username', 'JohnDoe', 7);

Best Practices

1. Keep Cookies Small: Cookies are sent with every request, so keep them small to reduce overhead.
2. Use Secure and SameSite Flags: Always use secure and SameSite attributes for security.
3. Respect Privacy: Be transparent about what data you collect and comply with privacy laws like GDPR.
4. Use HttpOnly Flag: Mark cookies as HttpOnly to prevent client-side JavaScript from accessing them, reducing the risk of XSS attacks.

Frequently Asked Questions

Q1: How do I read a cookie in JavaScript?

You can read cookies using document.cookie, which returns a string of key-value pairs separated by semicolons.

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);
    }
  }
  return null;
}

// Usage
let username = getCookie('username');

Q2: How do I delete a cookie?

To delete a cookie, set its expiration date to a past date.

function deleteCookie(name) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
}

// Usage
deleteCookie('username');

Q3: Can I set multiple cookies at once?

Yes, you can set multiple cookies by separating them with a semicolon.

document.cookie = 'username=JohnDoe; lastname=Doe; path=/';

Q4: What are the limitations of cookies?

• Limited size (typically 4KB per cookie)
• Sent with every request, increasing bandwidth
• Security concerns if not implemented properly

Conclusion

Cookies are a fundamental part of web development, allowing websites to maintain user sessions and preferences. By following the steps and best practices outlined in this article, you can effectively set and manage cookies in your JavaScript applications.

Remember to always prioritize security and privacy when working with cookies. Happy coding!