Store, Update and Delete Cookies Data in JavaScript

In this blog, we will show you how set, get, update and delete cookies with JavaScript. We will take few examples about cookies in JavaScript. Here, we have also see few cookie functions like check cookie exists or more.

What is Cookies?

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

Generally cookies are use to analysis user behavior and provide better user experience. JavaScript provides in-built way to handle cookies data related operations.

JavaScript cookies are idle for 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 operation, 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 user close browser, but can set cookie expiry time and keep cookie alive till 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 path for cookies. By default path for cookies is current page or URL. Please consider below example for setting path for cookies.

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

Read Cookie in JavaScript

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

cookie = document.cookie;

This will get all cookies store in current website. However, you can get specific cookie from all cookie 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 above example, we have defined function by getCookie name which accept one parameter. First of all, it will get all cookies then it will retrieve specific cookie by it's name.

Update Cookie Value with JavaScript

The concept of updating cookie is same as overwrite. Here we are note changing value of cookie but we'll set new value with same cookie name. Let's take 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 pass 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 removes cookies from it's collection.

Conclusion

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