What are cookies?
A cookie is a variable stored in the visitor's computer. This cookie is sent whenever the same computer requests a page through the browser. You can use JavaScript to create and retrieve the value of a cookie.
Examples of cookies:
Name cookies
When a visitor first visits the page, he or she may fill in his/her name. The name will be stored in the cookie. When visitors visit the website again, they receive a welcome speech like "Welcome John Doe!". The name is retrieved from the cookie.
Password cookies
When a visitor first visits the page, he or she may fill in his/her password. Passwords can also be stored in cookies. When they visit the website again, the password is retrieved from the cookie.
Date cookies
When a visitor first visits your website, the current date can be stored in the cookie. When they visit the website again, they receive a message like this: "Your last visit was on Tuesday August 11, 2005!". The date is also retrieved from the cookie.
Create and store cookies
In this example we want to create a cookie that stores the visitor's name. When visitors first visit the website, they are asked to fill in their name. The name will be stored in the cookie. When visitors visit the website again, they receive a welcome message.
First, we will create a function that stores the visitor's name in the cookie variable:
The code copy is as follows:
<span style="font-size:14px;">function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}</span>
The parameters in the above function contain the name, value and number of expired days of the cookie.
In the above function, we first convert the number of days to a valid date, and then we deposit the cookie name, value and its expiration date into the document.cookie object.
After that, we want to create another function to check if the cookie is set:
The code copy is as follows:
<span style="font-size:14px;">function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}</span>
The above function first checks whether there are cookies in the document.cookie object. If the document.cookie object contains certain cookies, it will continue to check whether the cookies we specified are stored. If the cookie we want is found, the value will be returned, otherwise the empty string will be returned.
Finally, we want to create a function. The function is: if the cookie is set, a welcome word will be displayed, otherwise a prompt box will be displayed to ask the user to enter a name.
The code copy is as follows:
<span style="font-size:14px;">function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}</span>
Here is all the code:
The code copy is as follows:
<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html></span>