Understanding JavaScript Cookies

Cookies are small pieces of data stored on the user's computer by the web browser while browsing a website. They are used to remember information about the user, such as preferences or session data.

Key Concepts of JavaScript Cookies

What are Cookies?

• Cookies are small text files stored on the client-side.
• They are used to track user sessions, store user preferences, and manage user authentication.

Creating Cookies

You can create a cookie in JavaScript using the document.cookie property.

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

In this example:

• username=JohnDoe is the name-value pair.
• expires sets the expiration date of the cookie.
• path=/ makes the cookie accessible on all pages of the site.

Reading Cookies

To read a cookie, use document.cookie, which returns all cookies in a single string.

let cookies = document.cookie;
console.log(cookies);

This will log all cookies to the console.

Deleting Cookies

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

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

Important Considerations

Cookie Size Limitations

• Each cookie can store up to 4KB of data.
• A domain can have a limited number of cookies (typically around 20).

Security and Privacy

• Cookies can store sensitive information, so it’s crucial to manage them securely.
• Use the Secure and HttpOnly flags to enhance security:
  • Secure: The cookie is sent only over HTTPS.
  • HttpOnly: The cookie is inaccessible to JavaScript, preventing XSS attacks.

Conclusion

Cookies are essential for managing user sessions and preferences in web applications. Understanding how to create, read, and delete cookies in JavaScript is fundamental for web development. Always keep security in mind when handling cookies!