What is a cookie? Js manually creates and stores cookies

  • 2020-03-30 03:06:26
  • 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.
Examples of cookies:

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:
 
<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 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:
 
<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 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.
 
<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's all the code:
 
<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> 

Related articles: