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.
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="string of data & value separated by ; "
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.
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.
document.cookie="name" + "=" + vlaue + ";expires="+dt.toUTCString();
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.
You can check this code in this DEMO of cookies
dt= new Date();
var mts=dt.getDate(dt) + 1;
document.cookie="name" + "=" + name + ";expires="+dt.toUTCString();
//var str="name" + "=" + name + ";expires="+dt.toUTCString();
//document.write("<br><br>" + str);
<form name=f1 method=post action=''><input type=text name=t1><input type=button onclick='add_cookies()'; value='Add Cookies'></form>
<a href=add-cookies.htm>Add Cookies</a> | <a href=read-cookies.htm>Read Cookies</a> | <a href=delete-cookies.htm>Delete Cookies</a>
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.
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 str = document.cookie
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 ;
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.
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.
//document.write(my_array[i] + "<br >");
//document.write( name + " : " + value + "<br>");
document.write("Welcome " + read_cookies("name"));
<a href=add-cookies.htm>Add Cookies</a> |
<a href=read-cookies.htm>Read Cookies</a> |
<a href=delete-cookies.htm>Delete Cookies</a>
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.
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.
document.cookie="name" + "=" + "" + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
Demo of Adding reading and clearing Cookies