What's a cookie anyway?
A cookie is a small piece of information stored by the web browser on the client machine in a
text (.txt) file which can be retrieved later. A script/program either on server side or client
side may request the web browser to store a cookie. Cookie information is stored as a name value pairs.
document.cookie property for manipulation of a client-side
cookie. One can set the
cookie property at any time.
Cookies can be very useful for -
A cookie can be sent back only to the server which created it. Thus, allowing a two way communication
of a cookie. Many web servers use this to store user preferences, user ID on the user machine;
which are sent back to them when user revisits the same site. This information can then be used
by the web server to enhance and personalize the user experience. The cookies are stored and sent by
the web-browser, provided that it is cookie enabled.
State Maintenance/Persistence across different pages of the site, for HTTP is a state less protocol.
In english, it means cookies can be used for "remembering" certain data specific to the user (such as User ID)
as he browses different pages of the site. Session variables used in server side scripts such as ASP
- To allow user-side customization of web information, to serve a personalized site,
as done by Yahoo and few others.
Usually, cookies are pretty safe and most sites use them widely. Moreover, most sites will
not work as desired if you disable cookies. You can find more information about cookies at
Cookie Central and at
Cookie in action
To understand how cookies work, enter your name in text field below, and click 'Set Cookie' button.
This will place a cookie having your name on your machine. After placing a cookie,
it will reload the page to force reading of the cookie. You will see the message "Welcome back your-name"
at top just below the article title. To understand how the values are retained across pages
click on any other link from the menu (top) or navigation bar (bottom).
Then click back button of your browser to come back, you will notice that "Welcome back your-name"
message is still there. To emphasize the point, close the browser, open it again and come back to
this page. The welcome message with your name stays! This is called as |
in jargon ;))
This particular cookie is valid for 1 month from the date of creation, hence if you visit the page within
one month it will remember you and welcome you. To delete this cookie now,
As you must have noticed by now, the important steps in cookie manipulation are -
For creating a cookie, for reading a cookie and for deleting a cookie. The cookie functions are provided
in a reusable .js file (named as
- Create A Cookie - Create or set a cookie on user machine having cookie name, cookie value and
the time when cookie should get deleted automatically (EXPIRES atribute, this is optional). If this is not specified
the cookie is called a
session cookie and it expires (gets deleted) when
user's session ends, i.e. when the browser is closed.
The additional information that can be optionally stored in the cookie includes
Secure is used only over a secure communication channel ( currently only HTTPS).
- Read The Cookie - Read the stored cookie and extract its value. This requires only cookie
name. Remember that you can only read the cookie which is created by your script/program.
- Delete The Cookie - This may not be always done, as expires attribute takes care of it.
To delete a cookie set/create a cookie with the exactly same PATH (if any) and NAME values,
and an EXPIRES value which is in the past.
cookies.js) which also contains function documentation.
The function prototypes and usage -
function setCookie(szName, szValue [,szExpires] [,szPath] [,szDomain] [,bSecure])
- To create/set a cookie. It requires at least two arguments szName and szValue,
and 4 optional arguments -
This function creates a cookie string from the given arguments (by URL encoding name=value attributes),
and sets the cookie as -
- szExpires - A Date object specifying the date on which the cookie expires.
- szPath - A string argument specifying path, / is the common value.
- szDomain - A string argument specifying the domain attribute for this cookie.
- bSecure - A boolean value (true/false), if this cookie is meant for communication
over a secure channel, for HTTPS cookies only.
document.cookie = szCookieText; //constructed cookie string
function getCookie(szName) - To read the cookie set by setCokie(...) function.
The only argument which it takes is the cookie name szName, which is set by the previous function.
This function returns the cookie value read, which can be parsed if necessary, to get the required data.
This function simply parses
document.cooke for the given cookie name, and returns the extracted
cookie value in the original format (by URL decoding the value).
function deleteCookie(szName) - You can use this function optionally to delete the cookie.
It takes only one parameter cookie name, szName and deletes the cookie immediately.
This function simply sets the same cookie with an expires attribute which is in the past, thus deleting
it immediately irrespective of the original expires attribute.
If clicking on "Download..." does not work for you, right click and choose "Save Target As..."(IE)
or "Save Link As.." (NN) or equivalent from your browser pop up menu.
You can include this file in your HTML file(s), to create and read cookies easily by calling
these functions without any modification. As an example, consider creating and reading a cookie
that is used in this page, using these functions -
//for creating a cookie
var today = new Date();
var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
setCookie("technofundoDemoCookie", "Manish", nextMonth);
This will set a cookie named
'technofundoDemoCookie' with value
on the user machine which expires one month after its creation. It uses only 3 arguments of the
available 6 ones.
//for reading the cookie
var szName = getCookie("technofundoDemoCookie");
In this code snippet, the variable szName will contain the value of the cookie named
which has been set earlier. This variable can be later used as required.
//for deleting the cookie
It simply calls the deleteCookie() function with the cookie name
to delete the cookie.
In the end
Although cookies are very useful for all these reasons and perhaps more, here are few things
you should know.
I hope you find this article and code useful, do
about this article and the code. If there are any problems/bugs let me know, and of course,
disclaimer is implied.
I hope you use this code creatively to enhance your site. Happy coding and debugging ;))
- The browser or user can delete cookies before its expires.
- Many people can share one machine and one person can use multiple machines, so cookies are not always reliable completely.
- Do not rely only on cookies for state maintenance/persistence, support it with server side as well.
- Do not store sensitive information in cookies.
- Do respect user privacy.
Author : Manish Hatwalne.