JavaScript Cookies, Set, get, update and delete cookies

JavaScript cookies get, set and delete; Through this tutorial, i am going to show you how to create, read, update and delete cookies in JavaScript with the help of examples.

JavaScript Cookies

What is Cookies In JavaScript
Create/SET a Cookie in JavaScript
Read/GET a Cookie in JavaScript
Update a Cookie in JavaScript
Delete a Cookie in JavaScript
Set a Cookie Function
Get a Cookie Function
Check a Cookie Function
JavaScript Program For Set, get, update and delete cookies

JavaScript Cookies Set Get Delete

JavaScript Cookies are data, stored in small text files, on your computer.

For example:- when user requests a web page from a web server using a web browser. After that the web server sends a web page and the web server forgets everything about the user. To remember users’ information, cookies are use. Cookies are save in name-value pairs.

Create/Set a Cookie in JavaScript

JavaScript can create, change, read, and delete cookies using the document.cookie property.

Let’s use the following example for create cookies in JavaScript; as shown below:

document.cookie = "username=John Doe";

By default, the cookie is delete. When the user browser is close. You want to save with specific time. You can set the end date (in UTC time).

document.cookie = "username=John Doe; expires=Thu, 24 Dec 2021 12:00:00 UTC";

Read/Get a Cookie in JavaScript

Use the following example to read cookies in JavaScript; as shown below:

var xyz = document.cookie;

Update a Cookie in JavaScript

Use the following example to update/change cookies in javaScript; as shown below:

document.cookie = "username=John Smith; expires=Thu, 24 Jan 2019 12:00:00 UTC; path=/";

Delete a Cookie with JavaScript

Use the following example to delete a cookie in JavaScript; as shown below:

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

Set a Cookie Function

See the following example for set cookies with expiry time using javaScript function; as shown below:

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

The above example, these are the following params means :

cname => cookie name
cvalue => cookiee value
exdays => expires time of cookie

Get a Cookie Function

Here, i will function that returns the value of a specified cookie. A function that returns a value of a cookie is created. It takes the cookie name as a parameter (cname).

function getCookie(cname) {
  var name = cname + "=";
  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(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Check a Cookie Function

I will create the check cookie function that checks if a cookie is exist or not. The cookie is set. It will display it otherwise, it will display a prompt box and asking for the name of the user, and stores the username cookie for 100 days, by using the setCookie javascript function.

function checkCookie() {
   var username = getCookie("username");
   if (username != "") {
    alert("Welcome again " + username);
   } else {
     username = prompt("Please enter your name:", "");
     if (username != "" && username != null) {
       setCookie("username", username, 100);
     }
   }
 }

JavaScript Program For Set, get, update and delete cookies

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Cookies Example</title>
</head>
<body onload="checkCookie()"> 
</body>
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
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(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 100);
}
}
}
</script>
</html>

JavaScript Cookies, Set, get, update and delete cookies