Advertisement

Advertisement


JavaScript Cookies

Cookies are used to store data in client's computer in small text files. Cookies store important information about the sites we visit in the browser. This information is used by the browser next time when we visit the same website. It helps in loading the webpage faster than the first time as some of the data is already stored in the cookies and need not to get downloaded again to the browser.

The cookies are also used to store login information and to hold login tokens from the websites like Facebook, Google, etc.. so we need not to login again and again.


Create Cookie in JavaScript

The document.cookie property is used to create ,delete and read the cookies..

Syntax:

document.cookie = "username=John Snow";

An expiry date (in UTC time) can also be added. By default, the cookie is deleted when the browser is closed.

Syntax:

document.cookie = "username=John Snow; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Cookie Attributes

Attributes Description
expires It maintains the state of a cookie up to the specified date and time.
max-age Same as expires but here, time is given in seconds.
path It changes the scope of the cookie to all the pages of a website.
domain It is specifies the valid domain for the cookie.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Create Cookie </title>
</head>
<body>
<h3>JavaScript creating cookies, receive real data.</h3>
<script type="text/javascript">
var visitor_name = prompt("What's your name?","");
var expr_date = new Date("December 30, 2050");
var cookie_date = expr_date.toUTCString();
final_cookie = "Name =" + encodeURIComponent(visitor_name) + "; expires on = " + cookie_date;
document.cookie = final_cookie;
alert(final_cookie);
</script>
</body>
</html>

Update Cookie

The only way to update or modify a cookie is to create another cookie with the same name and path as an existing one. Creating a cookie with the same name but with a different path then that of an existing one will add an additional cookie.


Cookie expires attribute

The expires attribute is used to give a time constraint for the cookie to sustain. Once the declared time is passed, a cookie is deleted automatically.

In this example first enter your name and then the days you want to store cookie and refresh it again. Next time the webpage will remember you.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Cookie Expire </title>
<script type="text/javascript">
function createCookie(cookieName,cookieValue,daysToExpire)
{
var date = new Date();
date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
}
function accessCookie(cookieName)
{
var name = cookieName + "=";
var allCookieArray = document.cookie.split(';');
for(var i=0; i<allCookieArray.length; i++)
{
var temp = allCookieArray[i].trim();
if (temp.indexOf(name)==0)
return temp.substring(name.length,temp.length);
}
return "";
}
function checkCookie()
{
var user = accessCookie("testCookie");
if (user!="")
alert("Welcome Back " + user + "!!!");
else
{
user = prompt("Please enter your name");
num = prompt("How many days you want to store your name on your computer?");
if (user!="" && user!=null)
{
createCookie("testCookie", user, num);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<h4>Enter Your name and for how many days you want to store cookie and refresh it again.</h4>
</body>
</html>









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.