Store Data in Cookies with JavaScript

The Cookie is a small text file stored in the user’s computer, it helps to store user information in the web pages. Generally, the Cookies are used in the server-side script to store information that the server embeds on the user’s computer. You can also use Cookie in the client-side script without interacting with the server.

JavaScript Cookie is the best option to store data in the web pages without using a server-side script. You can store, read, update, and delete data without interacting with the server. In this tutorial, we will show you how to use Cookies in JavaScript to store and modify information in the web pages (client-side script).

The document.cookie property is used to create, read, and delete cookies in JavaScript.

Create Cookie with JavaScript

Use the document.cookie property to create a cookie using JavaScript.

document.cookie = "name=John Doe";

By default, the cookie is deleted once the browser is closed. But, you can set an expiry date and time (in UTC time) to make the cookie alive as per your needs.

document.cookie = "name=John Doe; expires=Wed, 13 Jan 2021 12:00:00 UTC";

By default, the cookie belongs to the current page. But, you can set a path the cookie belongs to.

document.cookie = "name=John Doe; expires=Wed, 13 Jan 2021 12:00:00 UTC; path=/";

Read Cookie with JavaScript

Cookie value can be retrieved using the document.cookie property.

var value = document.cookie;

Change Cookie Value with JavaScript

Cookie value can be changed in the same way it created.

document.cookie = "name=Codex World; expires=Wed, 13 Jan 2021 12:00:00 UTC; path=/";

Delete Cookie with JavaScript

Set empty value and pass the previous date in the expires parameter to delete a cookie.

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

Now, we will create some custom functions to set, get, and delete cookies in JavaScript. These JavaScript functions will provide a user-friendly way to work with cookies on the web page.

Set Cookie

The following setCookie() function helps to create a cookie with a specific name and value using JavaScript.

• name – The name of the cookie.
• value – The value of the cookie.
• exp_days – The cookie expiry time in days.

function setCookie(name,value,exp_days) {
    var d = new Date();
    d.setTime(d.getTime() + (exp_days*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

Note that: The “/” means that the cookie will be available in the entire website domain.

Example Code:
The following code is used to set a cookie named username with the value CodexWorld for 5 days.

setCookie("username", "CodexWorld", 5);

Get Cookie

The following getCookie() function helps to retrieve the value of a predefined cookie using JavaScript.

• name – The name of the cookie.

function getCookie(name) {
    var cname = name + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++){
        var c = ca[i];
        while(c.charAt(0) == ' '){
            c = c.substring(1);
        }
        if(c.indexOf(cname) == 0){
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

Example Code:
The following code is used to get the value of the cookie username.

var user = getCookie("username");

Delete Cookie

The following deleteCookie() function helps to remove cookie using JavaScript.

• name – The name of the cookie.

function deleteCookie(name) {
    var d = new Date();
    d.setTime(d.getTime() - (60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = name + "=;" + expires + ";path=/";
}

Example Code:
The following code is used to remove the cookie username.

deleteCookie("username");

Conclusion

If you want to store data with Cookies on the web pages, JavaScript cookie will be very useful. You can use our custom functions to manage cookies in JavaScript. Also, our example code can be used to store data in the cookie and get/update/delete cookies with JavaScript.