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>
