Store, Update and Delete Cookies Data in JavaScript

5 mins0
Store update and delete cookie in JavaScript

In this blog, we will show you how to set, get, update, and delete cookies with JavaScript. We will take a few examples of cookies in JavaScript. Here, we have also seen a few cookie functions like checking a cookie exist or more.

What are Cookies?

Cookies are small data files, which is stored in the remote browser or user’s browser and with help of cookies, we can track or identify returning users on web pages.

Generally, cookies are used to analyze user behavior and provide a better user experience. JavaScript provides an in-built way to handle cookies data-related operations.

JavaScript cookies are idle to store data without using server-side scripting. This means we can store, get, update, or delete cookies data without the help of server-side languages like PHP.

For cookies related operations, JavaScript uses the document.cookie property. Those operations can be creating, reading, updating, and deleting cookies in JavaScript. Let’s learn one by one using examples.

Create Cookie in JavaScript

The document.cookie method is used to store or create cookies in JavaScript. By default, cookies are deleted when the user close browser but can set a cookie expiry time and keep cookie alive till a specific date and time.

//Auto Expiry
document.cookie = "name=John Wick";

//Expiry with specific date and time
document.cookie = "name=John Wick; expires=Wed, 1 Jan 2023 12:00:00 UTC";

Here, we can also set ppathsfor cookies. By default path for cookies is the current page or URL. Please consider below example for setting path for cookies.

document.cookie = "name=John Wick; path=/";

Read Cookie in JavaScript

Reading cookies is simple like using any other JavaScript function. The document.cookie method is used to read cookies.

cookie = document.cookie;

This will get all cookies store on current website. However, you can get a specific cookie from all cookies by developing functionality like below:

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

getCookie(name);

In the above example, we have defined a function by getCookie name which accepts one parameter. First of all, it will get all cookies then it will retrieve specific cookies by its name.

Update Cookie Value with JavaScript

The concept of updating cookie is the same as overwriting. Here we note changing the value of cookie but we’ll set a new value with same cookie name. Let’s take an example to update cookie value in Javascript:

document.cookie = "name=Iron Man; expires=Wed, 1 Jan 2023 12:00:00 UTC";

Delete Cookie with JavaScript

Set empty value or passing previous timestamp value in the expires parameter will delete a cookie. The syntax of delete cookie is same as update or add.

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

Here, we have removed name of cookie and also passed previous date. It will automatically remove cookie from its collection.

Conclusion

In this article, we have taken some examples to create, read, update, and delete cookies in JavaScript. Those are just basic examples for cookies related operations While practically using cookies you can create some functions as per your requirement and use those functions to perform cookie-related operations just like getCookie() function we used.

Related Articles