JavaScript

What Are Cookies & How to Work with Them Using JavaScript

Cookies are data that are stored inside small and very manageable text files, cookies are used to tell the server about the client’s preference and other information. Cookies are mostly stored on the client’s computer, or in the client’s browser’s memory.

When working with industrial-scale applications the servers cannot remember details about their client. Once the session is over with the client, the server removes all the information about the client, that is why cookies are stored on the client-side. So the next time, the client reaches out to the server with a request, a cookie is sent along with the request so that the server already knows the preferences of the client.

What are the types of cookies?

There are three different types of cookies which are:

  • Session cookies: These cookies are automatically deleted from your browsers once the session with the website ends
  • First-Party Cookies: These are the cookies that are created by a specific website and can only be read by that specific website
  • Third-Party Cookies: These are the cookies created by the advertisement running on a website that you might have visited

What are the fields of cookies?

Generally, cookies look like name-value pairs, but they consist of 5 different fields. These fields are:

  • Name=Value pairs: These are the cookie version of “key-value” pairs
  • Expires: This defines when the cookie will expire from the browser, If no expiry date is specified with the cookie, then the cookie will be deleted when the browser is closed
  • Path: The path of the website that has set the cookie in the browser, if the path is empty then deleting a specific can become a hurdle
  • Domain: The domain name of the website that set the cookie
  • Secure: If this field is set, then the cookie can only be read by a secure server

These are all the variable fields of a cookie, apart from the name=value pairs all the other fields are optional

How to use JavaScript to work with Cookies?

Cookies are interacted by JavaScript by using the following syntax:

document.cookie = "name=value; expires: 01 Jan 2024; path=/;"

To demonstrate working with cookies we are going to set up an HTML web page with the following lines inside the webpage:

<center>

<p id="p">It’s All Cookies!!</p>

<button id="add">Click to add a yummy cookie!</button>

<button id="show">Click to show cookies</button>

<button id="delete">Click to delete cookie</button>

</center>

We get the following output on our browser:

Now that we have our HTML set-up we can start working on our javascript code. The first thing that we are going to implement is the functionality of the button that will add a cookie to our browser with the following lines of code:

$("#add").click(function () {
document.cookie = "name= Yummy Cookie!";
  alert("Cookie added");
});

Now, run the program and click on the button that says “Click to add a yummy cookie!”, you will get the following output:

You can confirm this cookie by heading over to the developer’s console > application > cookies and finding the cookie that we just created just like shown in the image below:

As you can see from the developer’s tools, we were able to successfully create our cookie. The next step is to read this cookie using JavaScript and alert the user about the cookie upon the button press, we do this by using the following lines of code:

$("#show").click(function () {
  alert(document.cookie);
});

Click on the button that says “Click to show cookies” and you will get the following result:

As you can see, we can read the cookie and display it to the user. Now, we need to learn how to delete a cookie from the browser. We can delete a cookie upon button press by using the following lines of code:

$("#delete").click(function () {
document.cookie = "name=;expires=Thu, 01 Jan 1970 00:00:01 GMT";
  alert("Cookie Deleted");
});

We can delete cookies by setting their expiry date to a past date and that is exactly what we have done in the above code snippet. Now, if you press the “click to delete cookie” button you will get the following result:

To verify this deletion, click on the button to show cookies once more and you will get the following result:

As you can see, the alert dialogue box is not showing us any cookies, this is because we were able to delete the cookie using the delete button successfully.

Conclusion

Cookies are small text files that are stored on the client’s computer or on the client’s browser to notify the server of the client’s preferences. There are three different types of cookies namely: Session cookies, first-party cookies, and third-party cookies. A cookie contains 5 different fields out of which only one is mandatory and the remaining 4 fields are optional. Cookies functions are done in JavaScript by using the document.cookie attribute. In this post, we learned how to work with cookies using javascript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.