A cookie is a short text file stored on a user’s computer that aids in the storage of user information in 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 a client-side script that does not interact with the server.

Without employing a server-side script, a JavaScript Cookie is the best solution for storing data in web pages. Without communicating with the server, you can save, read, update, and delete data. We’ll show you how to utilise Cookies in JavaScript to save and alter data on web pages in this lesson (client-side script).

Create, read, and remove cookies with JavaScript with the document.cookie property.

Use JavaScript to make a cookie
To create a cookie with JavaScript, use the document.cookie property.

document.cookie = "name=John Doe";

When you close your browser, the cookie is automatically removed. However, you can specify an expiration date and time (in UTC time) to keep the cookie alive for as long as you need it.

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

The cookie is associated with the current page by default. You can, however, specify which path the cookie belongs to.

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

Cookie is read using JavaScript.
The document.cookie property can be used to get the cookie value.

var value = document.cookie;

Using JavaScript, you can change the cookie value.
The value of a cookie can be altered in the same way it was created.

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

Using JavaScript, you can delete cookies.
To delete a cookie, specify an empty value and the previous date in the expires parameter.

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

In JavaScript, we’ll write some custom functions to set, get, and delete cookies. These JavaScript functions will make working with cookies on the web page more user-friendly.

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

name – This is the cookie’s name.
value – The cookie’s worth in dollars.
exp days – The number of days until a cookie expires.

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 across the entire website domain.

Example Code: Set a cookie named username with the value CodexWorld for 5 days with the following code.

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

Obtain Cookie

The getCookie() function in JavaScript can be used to retrieve the value of a predefined cookie.

name – This is 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 "";
}

The value of the cookie username can be obtained using the following code.

var user = getCookie("username");

Cookies Delete

The deleteCookie() function in JavaScript can be used to remove cookies.

name – This is 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=/";
}

To remove the cookie username, use the following code as an example.

deleteCookie("username");

Note

JavaScript cookie will be very beneficial if you wish to store data with Cookies on web sites. To manage cookies with JavaScript, you can utilise our own functions. In addition, our JavaScript example code can be used to store data in cookies and get/update/delete cookies.