Home » JavaScript » JavaScript Cookies

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.

Example Try this code »

<!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.

Example Try this code »

<!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>

Recommended :

1 . Variables and Datatypes in JavaScript
2 . Use events in Forms using JavaScript
3 . Functions in JavaScript
4 . JavaScript Math

5 . Event listner in JavaScript
6 . Error Handling in JavaScript
7 . Photography Snippets using HTML and CSS
8 . Create Youtube Thumbnail Generater in PHP

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors