JavaScript – Cookies How to Create, Read & Delete Example

JavaScript – What are Cookies ? – Today you will learn about javaScript cookies and it’s features like, how to create cookies, how to delete cookies, how to change cookies, how to get all javaScript cookies, How to read javaScript cookies, how to set cookies.

What are cookies ?

Basically JavaScript cookies are data. Cookies are use for stored users information for web pages. Small data text files cookies are store in your computer are cookies.

When a 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.

JavaScript Cookies

Contents

  • Create a Cookie with JavaScript
  • Read a Cookie with JavaScript
  • Change a Cookie with JavaScript
  • Delete a Cookie with JavaScript
  • Set a Cookie Function
  • Get a Cookie Function
  • Check a Cookie Function
  • Check Program

Create a Cookie with JavaScript

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

This example shows – how to create cookies in JavaScript.

Example
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 Jan 2019 12:00:00 UTC";

Read a Cookie with JavaScript

This example shows how to read cookies.

Example
var xyz = document.cookie;

Change a Cookie with JavaScript

You can change a javaScript Cookie the same way as you create it.

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

Delete a Cookie with JavaScript

If you want to delete a cookie. Set Cookies expiry date from the past.

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

Set a Cookie Function

In This javascript set cookie example, you will learn how to create cookies with javascript cookies

Example
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

we need to create a 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).

Example
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

Now, we 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.

Example
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);
}
}
}

Check Program with preview

<!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 != "" &amp;&amp; username != null) {
setCookie("username", username, 100);
}
}
}
</script>
</html>

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *