JavaScript Cookies Set Get Delete

JavaScript Cookies Set Get Delete

JavaScript cookies get, set and delete; Through this tutorial, 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.

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 Set Get Delete

  • Create/SET a Cookie with JavaScript
  • Read/GET 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 with preview

Create/Set 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.

javascript set cookie 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/Get a Cookie with JavaScript

This example shows how to read cookies.

javascript read/get cookie example

var xyz = document.cookie;

Change a Cookie with JavaScript

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

javascript change cookie 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.

javascript delete cookie 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

javascript set cookie function 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).

javascript get cookie function 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.

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

Recommended JavaScript Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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