Javascript cookies
With Javascript, you can read and write cookies.
This lesson focuses on:
- What is a cookie?
- Writing cookies
- Reading cookies
What is a cookie?
In popular usage, a cookie is a sweet confection that comes in many varieties. In computer terms, 'cookie' means something vastly different than that.
In computer usage, a cookie is a small text file that a web server may store on a user's computer for the purpose of uniquely identifying the user during future visits to the website.
Writing cookies
You can write cookies using the cookie property of the document object.
A cooke can contain four parameters:
-
cookie name
The name of the cookie. This is the only cookie parameter that is required.
-
expiration date
Signifies when the cookie should expire. When this date is reached, the cookie will be automatically deleted by the web browser.
-
path
The URL of the page that set the cookie.
-
domain
The domain that set the cookie.
Syntax for writing a cookie:
document.cookie="nameOfCookie=cookieValue; expires=expirationDate;path=URL;domain=theDomain;"
Example:
<script type="text/javascript">
//get the current date
//and put it in the variable d
var d = new Date();
//add five days to the d Date object
d.setDate(d.getDate() + 5);
//set the cookie
//the toGMTString() function is used to convert
//the date into a String
document.cookie="aCookie=this is a cookie;expires="
+ d.toGMTString();
</script>
In the above example, a cookie named "aCookie" is created that contains the value "this is a cookie" and it is set to expire five days after it is created.
Reading a cookie
To read a cookie, you should first check if cookies are set using the length property.
Example:
<script type="text/javascript>
if(document.cookie.length > 0){
alert("Cookies have been set");
}
else{
alert("No cookies have been set");
}
</script>
In the above example, if cookies are set then the message "Cookies have been set" will be displayed in an alert box. If cookies are not set, then the message "No cookies have been set" will be displayed in an alert box.
If there are cookies set, you can read them using the indexOf() function.
The indexOf() function is used to return the position of the first occurence of a string within another string
Example:
var aFruit = new String("Strawberry");
//search for the string "Straw" within the aFruit string
//and print its position
document.write(aFruit.indexOf("Straw"));
//skip a line
document.write("<br />");
//search for the string "rasp" within the aFruit string
//and print its position
document.write(aFruit.indexOf("rasp"));
Output:
-1
In the above example, the indexOf() function returns the position of the first occurence of "Straw" within "Strawberry" which is 0. It then returns the position of the first occurence of "rasp" within "Strawberry" which is -1. Whenever a string is not found within another string using the indexOf() function it will return -1.
You can apply this to reading cookies by searching through the document.cookie property for a specified cookie.
Example:
<script type="text/javascript>
if(document.cookie.indexOf("aCookie") == -1){
alert("There is no cookie by the name of aCookie");
}
else{
alert("The aCookie cookie is set!");
}
</script>
In the above example we are checking if a cookie named aCookie is set by searching for the string "aCookie" within the document.cookie property. If it returns -1, then the aCookie cookie is not set, otherwise it is.
If the cookie is set, you can now read it.
Example:
<script type="text/javascript>
var cookieStart, cookieEnd, cookieValue;
//check if cookies are set
if (document.cookie.length > 0){
//start reading from the point
//where the aCookie cookie is set
cookieStart = document.cookie.indexOf("aCookie=");
//if the aCookie cookie is set
if (cookieStart != -1){
/*
the starting point for reading the cookie
should be from the point where aCookie is set
+ the length of the string "aCookie"
this way, only the value of the
cookie is read and not the cookie name
the ending point of the cookie is set as the first
semicolon after the starting point to ensure that
only the value of the cookie is read
*/
cookieStart = cookieStart + "aCookie=".length;
cookieEnd = document.cookie.indexOf(";", cookieStart);
//if there is no occurence of the semicolon character
//cookieEnd takes the length of the document.cookie property
if (cookieEnd == -1) cookieEnd = document.cookie.length;
//cookieValue is set as all
//the data between cookieStart and cookieEnd
cookieValue = document.cookie.substring(cookieStart,
cookieEnd);
//print the name of the cookie along with its value
document.write("aCookie = " + cookieValue);
}
}
</script>
Output:
