Javascript creates and stores cookie examples

2020-03-30 01:15:30
OfStack

What is a cookie?
Cookies are variables stored on the visitor's computer. This cookie is sent whenever the same computer requests a page through a browser. You can use JavaScript to create and retrieve cookie values.

Cookie usage scenario:

Name the cookie
When a visitor first visits the page, he or she may fill in his or her name. The name is stored in a cookie. When visitors visit the site again, they receive something like "Welcome John Doe!" Of welcome. The name is retrieved from the cookie.

Password cookies
When a visitor first visits the page, he or she may fill in his or her password. Passwords can also be stored in cookies. When they visit the site again, the password is retrieved from the cookie.

The date of the cookie
When visitors first visit your site, the current date can be stored in a cookie. When they visit the site 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 are going to create a cookie that stores the visitor's name. When visitors first visit the site, they are asked to fill in their names. The name is stored in a cookie. When visitors visit the site again, they receive a welcome message.

First, we'll create a function that stores the visitor's name in a cookie variable:

To create a cookie is to spell a String:

"The username = amosli; Expires =Mon, 16 Dec 2013 16:20:04 GMT"
And then document.cookie= the String above.


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())
}

The parameters in the above function hold the name, value, and expiration date of the cookie.

In the above function, we first convert the number of days to a valid date, and then we store the cookie name, value, and its expiration date in the document.cookie object.

After that, we'll create another function to check if the cookie is set:

GetCookie () is the core of the one-sentence document.cookie, the rest of the string is on the processing.


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 ""
}

The above function first checks to see if cookies exist in the document.cookie object. If the document.cookie object has some cookies, we continue to check to see if the cookie we specified is stored. If we find the cookie we want, we return the value, otherwise we return an empty string.

Finally, we'll create a function that displays the welcome word if the cookie is set, or a prompt to ask the user for a name.


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)
    }
  }
}

Here's all the code:


<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>