Understanding JavaScript Cookies: A Simple Guide

In the world of web development, cookies play a vital role in creating a smooth and personalized user experience. JavaScript cookies, specifically, are small pieces of data stored on the user's computer by their web browser while they're browsing a website. This guide aims to demystify JavaScript cookies, explaining their importance, how they work, and how you can manipulate them for various tasks. Let's dive into the cookie jar and discover what makes these small data packets so essential.

What Are Cookies?

Imagine walking into a local bakery each morning. The baker, recognizing you, immediately starts preparing your favorite pastry before you even place an order. This personalized service makes you feel special and saves you time. In the digital world, cookies offer a similar personalized experience on websites. They remember your preferences, login details, and other personalized data, making your online journey smoother and more enjoyable.

How Cookies Are Getting Created?

Cookies can be set by both the server and the client, depending on the context and purpose:

Server-Set Cookies

When you visit a website, the server can send a Set-Cookie header along with the HTTP response to your browser. This header contains the cookie's name, value, and other attributes, such as the expiration date, path, and domain. Your browser then stores this information and sends it back to the server with subsequent requests to the same domain, in the form of a Cookie header. This mechanism is commonly used for session management, user authentication, and tracking user behavior across sessions.

Client-Set Cookies

Cookies can also be created and set directly in the client's browser using JavaScript. This is done through the document.cookie property, which allows you to write cookies. For example, setting a cookie in JavaScript might look like this:

document.cookie = "username=Subham Dash; expires=Tue, 30 April 2024 00:00:00 GMT; path=/";

How To Delete?

To delete the cookie you can simply provide an expiration date that occurred in the past. When the browser see that the cookie has expired, it will delete the cookie automatically,

Different Types?

There are mainly 2 different types of cookies

Session Cookies

Also known as transient cookies, these are temporary and stored in your browser's memory only for the duration of your browsing session. They are deleted automatically when you close your browser.

They're primarily used for session management, such as keeping you logged in on a website as you navigate from page to page

Persistent Cookies

Persistent cookies, or saved cookies, are stored on your device even after you close your browser. They have an expiration date set by the website, which can range from a few days to several years.

These cookies remember your preferences and actions across a site (like login details, language preferences) to provide a more personalized experience on your next visit.

Size limit

Each cookie is limited to about 4KB of data. This size includes the name, value, and attributes (such as expiration date and domain).

Most modern browsers allow for at least 20 cookies per domain.

Per cookie limit, per domain limit, and total browser limit these values vary from browser to browser.

Data Persistence

Depending upon the type of cookie data will persist in your browser.

Data Structure

key: value (value is a string )

When To Use

• Authorization

• Light data

• User preference where info can be exchanged with the server

When Not To Use

• The large set of data

• Sensitive information

Conclusion

JavaScript cookies are powerful tools for creating personalized and efficient web experiences. By understanding how to create, read, and delete cookies, and following best practices for their use, you can enhance your web applications while respecting user privacy.