Store, Update and Delete Cookies Data in JavaScript

Store Update and Delete Cookies Data in JavaScript is a fundamental aspect of web development, allowing developers to manage user preferences, session data, and other information on the client side.

Handling cookies involves three primary operations: storing, updating, and deleting cookie data. This process enables websites to remember user choices, maintain sessions, and personalize user experiences.

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.

For managing array data in JavaScript, How to Remove Duplicate Elements from an Array In JavaScript shows practical ways to clean arrays and keep only unique values efficiently.

Codewolfy