How To Set, Get & Delete Cookies in JavaScript

This tutorial helps how to create, read, update and delete a cookie in JavaScript. A cookie is a small text file that lets you store a small amount of data (nearly 4KB) on the user’s computer.

A stateless protocol called HTTP is used for communication between a web browser and a server. Each request is handled separately by stateless protocols.

Avoid storing important information, such as a password or credit card number, in cookies since a hostile user could be able to alter it.

Cookies that are longer than 4 KB, including their name and values, are condensed to fit.

What are Cookies

A cookie is a small bit of data that your browser can read and store on your computer. You might have unintentionally or knowingly benefited from cookies. Have you ever pre-filled your Facebook login information in order to avoid having to do it each time you want to log in? You are using cookies if the answer is yes. Key/value pairs are used to store cookies.

Set a cookie

Setting a cookie uses the following syntax:

document.cookie = 'newCookie'

Simple Example:

document.cookie = "username=cookievalue"

You can also add expiry date to your cookie so that the particular cookie will be removed from the computer on the specified date.

document.cookie = "username=username; expires= Mon, 06 Feb 2023 20:00:00 UTC"

The expiration date must be entered in UTC/GMT format. If the expiration date is not set, the cookie will be deleted when the user closes their browser.

You can also give the cookie’s domain and path, indicating which specific domain it belongs to and which directories there are.

document.cookie = "username=username; expires= Wed, 12 Sep 2023 10:00:00 UTC; path=/ "

setCookie method:

Let’s create a javascript method to set a cookie:

function setCookie(name, value, daysToLive) {
    // Encode value in order to escape semicolons, commas, and whitespace
    var cookie = name + "=" + encodeURIComponent(value);
    
    if(typeof daysToLive === "number") {
        /* Sets the max-age attribute so that the cookie expires
        after the specified number of days */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        
        document.cookie = cookie;
    }
}

in the above code, We have created a setCookie() method. This function will create a cookie with the passed argument’s name, value, and days. The expiration date of the cookie will be passed days from the time it was created.

How To Get Cookies

You can get all the saved cookies for the current domain.

var x = document.cookie

Update a cookie

Simply overwrite a cookie’s value in the cookie object to update it. To achieve this, create a new cookie with the same Name but a different Value and set it on the document.

setCookie('username', 'testing', 30);

We have a call setCookie() method that overwrites the value of the “username” cookie.

JavaScript Delete Cookie

You can delete a cookie by setting the value of the cookie to empty and setting the value of expiration to a passed date. When the browser sees that the cookie has expired, it will delete the cookie automatically.

document.cookie = "username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"