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:-

1. max-age: It is used to create a persistent cookie.

    // Creating a cookie with max-age attribute
    document.cookie = "name=Bobby; max-age= + 60 * 60 * 24 * 10"
   

2. expires: It is used to create a persistent cookie.

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

3. domain: It specifies the domain for which the cookie is valid. If not specified, this defaults to the host portion of the current document location.

    // Creating a cookie with path attribute
    document.cookie = "name=Bobby; domain=hashnode.com"
   

4. path: Path can be / (root). If not specified, defaults to the current path of the current document location.

    // Creating a cookie with path attribute
    document.cookie = "name=Bobby; path=/"
   

5. secure: Cookie will only be transmitted over the secure protocol as HTTPS.

    // Creating a cookie with secure attribute
    document.cookie = "name=Bobby; secure"
   

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 – Cookies that are created without the expires field are called session cookies. They are destroyed when the user quits the browser.

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

Persistent Cookies – Cookies that are created with the expires field are called persistent cookies. The browser keeps them up until their expiration date is reached.

// 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.✌️