JavaScript Cookies

What are Cookies

A cookie is a small piece of text data stored on the browser or client’s machine by the Web server. Once it’s been set, the client automatically returns the cookie to the web server with each request that it makes.

The size limit of cookies is 4kb.

Create a Cookie

// Syntax : document.cookie = "name=value"
document.cookie = "name=Bobby"

Optional Cookies Attribute:-
We can specify several optional attributes to control the behavior of the cookie. Here's a breakdown of those attributes:

1. path:

   • Specifies the URL path that must exist in the requested URL for the browser to send the Cookie header.

   • Example: path=/ (cookie is available site-wide).

2. expires:

   • Sets an expiration date and time for the cookie. After this date, the cookie is deleted.

   • Example: expires=Tue, 19 Jan 2038 03:14:07 GMT.

3. max-age:

   • Specifies the number of seconds until the cookie expires. It takes precedence over expires.

   • Example: max-age=3600 (expires in 1 hour).

4. domain:

   • Defines the domain for which the cookie is valid. If not specified, it defaults to the domain of the page that sets the cookie.

   • Example: domain=example.com.

5. secure:

   • Indicates that the cookie should only be sent over HTTPS.

   • Example: secure.

6. SameSite:

   • Controls whether the cookie should be sent with cross-site requests. Options are Strict, Lax, or None.

   • Example: SameSite=Strict.

7. httpOnly:

   • Ensures that the cookie is not accessible via JavaScript (document.cookie). This helps prevent XSS attacks.

   • Example: httpOnly.

8. priority (optional and less common):

   • Sets the priority of the cookie (Low, Medium, or High).

   • Example: priority=High.

Example:

document.cookie = "username=Bobby;path=/;max-age=3600;secure;SameSite=Lax";

This will set a cookie username with value Bobby, valid for the entire site (path=/), expiring in 1 hour (max-age=3600), sent only over HTTPS (secure), and with a SameSite policy of Lax.

name is a necessary attribute. Attributes must be separated by semicolons ;

When we assign a new cookie value to document.cookie, the current cookies will not be replaced. The new cookie will be parsed and its name-value pair will be appended to the list.

Read a Cookie

We can read cookies by using document.cookie.

// Creating cookie
document.cookie = "person1=Bobby"
document.cookie = "person2=Deadpool"

// Reading cookie
let c = document.cookie 
console.log(c) // person1=Bobby; person2=Deadpool

Update a Cookie

A cookie is updated by setting a new value to a cookie with the same name.

// Creating cookie
document.cookie = "name=Bobby"
// Reading cookie
let c = document.cookie
console.log(c) // name=Bobby

// Upading cookie
document.cookie = "name=Deadpool"
let c = document.cookie
console.log(c) // name=Deadpool

Delete a Cookie

To delete a cookie we have to create a cookie with the same name (and domain and path, if they were set) and a past date.

document.cookie = "name=Bobby; expires=Sun, 15-Jan-2023 00:00:00 UTC"

Type of Cookies

Session Cookies – These cookies are temporary and are deleted when the user closes the browser. We don’t need to specify expires or max-age attributes for these cookies.

// Creating a cookie without expires field a.k.a Session cookie
document.cookie="name=Bobby"

Persistent Cookies – These cookies remain stored on the client’s device until they reach their expiration date or are manually deleted. We need to specify the expires or max-age attribute to define how long the cookie should persist.

// Creating a cookie with expires field a.k.a Persistent cookie
document.cookie = "name=Bobby; expires=Sun, 1-Jan-2024 00:00:00 UTC"

Cookies Security Issues

• Can misuse Client Details

• Can track User

• Client Can Delete Cookies

• The client can Manipulate Cookies

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next blog.✌️