tg_9876

Home >> Tutorials >> Javascript tutorials


Cookies are small bits of information such as a user name or last visit to a web page. Web pages can set cookies on a user’s system and later retrieve them. ‘Cookies’ are stored in a user’s system.Definition: Cookies are a general mechanism which server side connections can use to both store and retrieve information on the client side of the connection.

Using Javascript and cookies, it is possible to store small bits of information into a user’s system.Eg: To keep track of when a user visited a web page or to store user name , we can use cookies. These ‘cookies’ reside in the client or user’s system.

Following 2 javascript functions can be used to store and retrieve a cookie

SetCookie            – Sets a cookie 
GetCookieValue     – Retrieves a cookie value

 function SetCookie(CookieName, CookieValue){ 
ExpiryDate = new Date(); 
ExpiryDate.setTime(ExpiryDate.getTime() + 2000*24*60*60*1000); 
var ExpiryDateString = “; expires=” + ExpiryDate.toGMTString(); 
document.cookie = CookieName + “=” + escape(CookieValue) + ExpiryDateString; 
}function GetCookieValue(CookieName) 
{ 
var CookieValue = “”; 
var DocumentCookie = ” ” + document.cookie + “;”; 
var CookieSearchStr = ” ” + CookieName + “=”; 
var CookieStartPosition = DocumentCookie.indexOf(CookieSearchStr); 
var CookieEndPosition;if (CookieStartPosition != -1) { 
CookieStartPosition += CookieSearchStr.length; 
CookieEndPosition = DocumentCookie.indexOf(“;”, CookieStartPosition); 
CookieValue = unescape(DocumentCookie.substring(CookieStartPosition, CookieEndPosition)); 
} 
return CookieValue; 
} 
 
Complete Source Code for seting and retrieving cookies using javascript:

<form name="testform"> 
<script> 
function SetCookie(CookieName, CookieValue){ 
ExpiryDate = new Date(); 
ExpiryDate.setTime(ExpiryDate.getTime() + 2000*24*60*60*1000); 
var ExpiryDateString = "; expires=" + ExpiryDate.toGMTString(); 
document.cookie = CookieName + "=" + escape(CookieValue) + ExpiryDateString; 
} 
function GetCookieValue(CookieName) 
{ 
var CookieValue = ""; 
var DocumentCookie = " " + document.cookie + ";"; 
var CookieSearchStr = " " + CookieName + "="; 
var CookieStartPosition = DocumentCookie.indexOf(CookieSearchStr); 
var CookieEndPosition;if (CookieStartPosition != -1) { 
CookieStartPosition += CookieSearchStr.length; 
CookieEndPosition = DocumentCookie.indexOf(";", CookieStartPosition); 
CookieValue = unescape(DocumentCookie.substring(CookieStartPosition, CookieEndPosition)); 
} 
return CookieValue; 
} 
 function changelocation() 
{ 
 SetCookie('username', document.testform.username.value) 
}</script> 
<HR> 
The following is an example of using Cookies. <BR> 
Enter a username in the textbox first and then click the button “Set my Name”. <BR> 
This will set a cookie, ‘username’,  in your system.<BR> 
<HR> 
Enter your name here : <input type=”text” name=”username” value=”myname” > 
<BR> 
<input type=”button” value=”Set my Name” onClick=”SetCookie(‘username’,document.testform.username.value)”> 
<BR> 
<input type=”button” value=”Get my Name” onClick=”alert(GetCookieValue(‘username’))”> 
<HR> 
</form>
 

Page contents: itechies.net – Learn how to set and retrieve cookies using javascript