loading

How to Store Data in Cookies with JavaScript

How to Store Data in Cookies with JavaScript

How to Store Data in Cookies with JavaScript

0 Sales

Free

The Cookie is a short text file that is kept on the user's computer and aids in the storage of user information on web sites. Cookies are typically employed in server-side scripts to save data that the server embeds on the user's machine. Cookie can also be used in client-side scripts without communicating with the server.
 

The greatest method for storing data in web pages without utilising a server-side script is JavaScript Cookie. Without communicating with the server, you may store, read, update, and remove data. We will demonstrate how to utilise Cookies in JavaScript to store and alter information in web pages in this tutorial (client-side script).

 

In JavaScript, the document.cookie attribute is used to generate, read, and remove cookies.

Create Cookie with JavaScript

To generate a cookie using JavaScript, use the document.cookie attribute.

document.cookie = "name=John Doe";

When you exit your browser, the cookie is automatically removed. However, you may provide an expiration date and time (in UTC time) to keep the cookie active as needed.

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

By default, the cookie is associated with the current page. However, you may specify which path the cookie belongs to.

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

 

Read Cookie with JavaScript

The document.cookie property may be used to obtain the cookie value.

var value = document.cookie;

 

Change Cookie Value with JavaScript

Cookie values can be modified in the same way that they were generated.

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

 

Delete Cookie with JavaScript

To remove a cookie, use an empty value and the earlier date in the expires argument.

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

Now, with JavaScript, we'll write some custom methods to set, retrieve, and remove cookies. These JavaScript methods will make it easier to interact with cookies on the web page.

Set Cookie

The setCookie() method in JavaScript allows you to generate a cookie with a given name and value.

- name – The cookie's name.
- value – The cookie's value.
- exp days – The cookie's expiration date 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=/";
}

It's worth noting that the "/" indicates that the cookie will be accessible throughout the whole website domain.

Example Code:
The code below is used to create a cookie called username with the value ThemesGiant that will be valid for 5 days.

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

 

Get Cookie

The getCookie() method in JavaScript allows you to access the value of a preset cookie.

- name – The cookie's name.

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 procedure is used to retrieve the cookie username value.

var user = getCookie("username");

Delete Cookie

The deleteCookie() method in JavaScript is useful for removing cookies.

- name – The cookie's name.

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 code below is used to delete the cookie username.

deleteCookie("username");

 

Conclusion

 

JavaScript cookies are highly handy if you wish to save data with Cookies on web pages. To control cookies with JavaScript, you may utilise our own functions. In addition, our sample code may be used to save data in cookies and retrieve/update/delete cookies using JavaScript.

 

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Jan 21, 2022

Updated Date : Jan 23, 2022

Ratings

Comments : 0

Downloads : 0