Home >>Javascript Tutorial >JavaScript Cookies
JavaScript Cookies
Cookies in JavaScript
The cookies in JavaScript is basically an amount of information that exists between a server-side and a client-side. These cookies are stored by a web browser at the time of browsing.
A cookie in JavaScript includes the information as a string that are generally in the form of a name-value pair separated by semi-colons. Cookies maintains the state of a user and it remember the user's information from all the web pages.
Let's Understand The Working Of The Cookies
Every request send by the user to the server is treated as a new request sent by the different users. Hence, in order to recognize the old user, the cookie is added with the response from the server. Browser at the client-side. Now, the cookie is added automatically with every request that is sent by the user to the server. The server recognize the users because of the cookies.
How Can You Create A Cookie In Javascript?
A cookie can be read, created, updated, and deleted by using document.cookie property in JavaScript. Here is the syntax for creating a cookie JavaScript:
document.cookie="name=value";
Examples of JavaScript Cookies
An example to set and get a cookie:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Example :2(Here is an example where cookie's name and value pair is displayed separately)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin";
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Example :3
3. In the following example, choices of colors are provided and the selected color value is passed to the cookie. Since, he cookies stores the last choice of the user in a browser, last choice of the user will be showed when the page will be reloaded.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="color" onchange="display()">
<option value="Select Color">Select Color</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
<script type="text/javascript">
function display()
{
var value = document.getElementById("color").value;
if (value != "Select Color")
{
document.bgColor = value;
document.cookie = "color=" + value;
}
}
window.onload = function ()
{
if (document.cookie.length != 0)
{
var array = document.cookie.split("=");
document.getElementById("color").value = array[1];
document.bgColor = array[1];
}
}
</script>
</body>
</html>