Managing Cookies in JavaScript

Cookies are used to store small piece of data in user computer. They are not used to store sensitive information like password , credit card number etc.

Creating Cookies

Cookies can be added by using document object of JavaScript. Here while adding we have to add life of the cookies by adding expire date. Here is the syntax to add the cookies.
document.cookie="string of data & value separated by ; "
We will start with a simple one line cookie without any expire date. Cookies are stored as name value pairs separated by semi columns ; . We will start with a simple example of storing a name in cookies.
document.cookie="name" + "=" + name; // name is a variable 

Adding expire date or life of the cookies

This is the life of the cookies in user computer after which cookies will be deleted. However if the user wishes they can remove cookies any point of time. If we are not adding any expire date to the cookies then the life of the cookies will last till the browser session only, once the browser is closed the cookies will be deleted. Here is the syntax to add expire date to our data.
document.cookie="name" + "=" + vlaue + ";expires="+dt.toUTCString();
Here value is the data which we will store against name. dt is the date object and we are converting to Universal Standard by using toUTCString function.

This sample code will add cookies for one day. To do this we will add the user to enter its name. Then on submit we will execute a function. Inside this function we will create a date object., collect the date part by using getDate() and then set the new date by adding one day and using setDate function. Then we will store the cookie. Here is the code.
<html>
<head>
<script type="text/javascript">
function add_cookies(){
var name=document.f1.t1.value;
dt= new Date();
var mts=dt.getDate(dt) + 1;
dt.setDate(mts);
document.write(dt);
document.cookie="name" + "=" + name + ";expires="+dt.toUTCString();
//var str="name" + "=" + name + ";expires="+dt.toUTCString(); 
//document.write("<br><br>" + str);
}
</script>
</head>
<body>
<form name=f1 method=post action=''><input type=text name=t1><input type=button onclick='add_cookies()'; value='Add Cookies'></form>

<br><br>
<a href=add-cookies.htm>Add Cookies</a>  |  <a href=read-cookies.htm>Read Cookies</a>  |  <a href=delete-cookies.htm>Delete Cookies</a>
</body>
</html>
You can check this code in this DEMO of cookies

Reading Cookies

As cookies are stored as name value pairs so we have to read ( or collect ) first and then apply various string functions to get our data.

Some of the string functions we will be using are split, indexOf and substr
To read the cookies stored here is the code.
var str = document.cookie
Now the total string is stored in our variable str. To get the array we will break the string using semi columns ; as delimiter. Here is the combined line to get the array of string.
var my_array=document.cookie.split(";");
Now in our array ( my_array) each element have two parts, one is name of the data and other one is value of the data. This name and value are separated by =. Here is one simple example with two sets of name value pairs separated by a ;
name=Simon; __utma=96992031.1087661074.1323303804.1327898268.1327904038.64;
So to get the data and value part of each element we will try to find out the location of '=' by using indexOf() function and then get the part of the string by using substr() function. The sub string we will get before the = is our name and the string after the = will be our corresponding value ( or data) of the name. To get this here is our sample code.
var my_array=document.cookie.split(";");
for (i=0;i<my_array.length;i++)
{
var name=my_array[i].substr(0,my_array[i].indexOf("="),my_array[i]);
var value=my_array[i].substr(my_array[i].indexOf("=")+1);
if(name==my_data){
return value;
}
}
Since we will have several name and value pairs, we will use one if condition to check our required name and then collect the corresponding value. To do all these we will use one function which will take name of the cookie and return the associated value of it. Here is the complete code to read the cookies values.
<html>
<head>
<script type="text/javascript">
function read_cookies(my_data){
document.write(document.cookie);
document.write("<br><br>");
var my_array=document.cookie.split(";");
for (i=0;i<my_array.length;i++)
{
//document.write(my_array[i] + "<br >");
var name=my_array[i].substr(0,my_array[i].indexOf("="),my_array[i]);
var value=my_array[i].substr(my_array[i].indexOf("=")+1);
//document.write( name + " : " + value + "<br>");
if(name==my_data){
return value;
}
} 

}

document.write("Welcome " + read_cookies("name"));
</script>
</head>
<body>

<br><br>
<a href=add-cookies.htm>Add Cookies</a>  | 
 <a href=read-cookies.htm>Read Cookies</a>  | 
 <a href=delete-cookies.htm>Delete Cookies</a>
</body>
</html>
DEMO Cookies

Delete Cookies

We can delete or clear cookies by assigning expire value to past date and time. We can assign just previous day or time but it is always better to assign date and time to Thu, 01-Jan-1970 00:00:01 GMT, as this date is starting date of all digital world. There is a chance that client compute may have wrong ( pervious ) date and time so by just assigning any previous value we may not actually remove cookies. To delete a cookie here is the code.
document.cookie="name" + "=" + "" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
Note that while adding cookies if we are not assigning any expiry data and time to the cookie then the cookies will be available till the browser session is active. Once the browser is closed then these cookies will not be available.
Demo of Adding reading and clearing Cookies
JavaScript Document Object
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer