First, let's take a look at the basic knowledge:
1. What is cookie?
Cookie is a variable stored on the visitor's computer. This cookie is sent every time a computer requests a page through a browser. You can use JavaScript to create and retrieve cookie values.
2. Examples of cookies:
• Name cookie when a visitor visits the page for the first time, he or she may fill in his/her name. The name is stored in the cookie. When a visitor visits the website again, they will receive a message similar to "Welcome John Doe! . The name is retrieved from the cookie.
• Password cookie when a visitor visits the page for the first time, he or she may fill in his/her password. Passwords can also be stored in cookies. When they access the website again, the password will be retrieved from the cookie.
• Date cookie when a visitor visits your website for the first time, the current date can be stored in the cookie. When they access the website again, they will receive a message like this: "Your last visit was on Tuesday August 11,200 5! ". The date is also retrieved from the cookie.
Create a cookie instance, how to create a cookie and retrieve the cookie
Javascript code:
Copy codeThe Code is as follows: // create a cookie
Function setCookie (name, value, expireday ){
Var exp = new Date ();
Exp. setTime (exp. getTime () + expireday * 24*60*60*1000); // set the cookie Period
Document. cookie = name + "=" + escape (value) + "; expires" + "=" + exp. toGMTString (); // create a cookie
}
// Extract the value from the cookie
Function getCookie (name ){
Var cookieStr = document. cookie;
If (cookieStr. length> 0 ){
Var cookieArr = cookieStr. split (";"); // convert cookie information into an array
For (var I = 0; I <cookieArr. length; I ++ ){
Var cookieVal = cookieArr [I]. split ("="); // convert each cookie (cookie name and value) into an array.
If (cookieVal [0] = name ){
Return unescape (cookieVal [1]); // return the cookie value to be extracted
}
}
}
}
// Test the cookie
Function checkCookie (){
Var cookieUser = document. getElementById ("cookieUser ");
Var userName = getCookie ("userName ");
If (userName ){
CookieUser. innerHTML = "hello" + userName + ", welcome back again! ";
} Else {
Var value = prompt ("Enter the user name ","");
If (value ){
SetCookie ('username', value, 1 );
} Else {
Alert ("Enter the user name! ");
}
}
}
The main difference is how to extract the cookie information we need. In this example, the getCookie function converts the cookie information into an array to find the cookie value we need to extract. You can also use the regular expression to match, as shown below:Copy codeThe Code is as follows: function getCookie (name ){
Var cookieStr = document. cookie;
Var cookieArr = cookieStr. match (new RegExp (name + "= [a-zA-Z0-9] *; $ "));
Var cookieVal = cookieArr. split ("= ");
If (cookieVal [0] = name ){
Return unescape (cookieVal [1]);
}
}
For example, in this example, if the cookie named userName is not stored in the browser, the user is prompted to enter the user name. When the page is refreshed again, the entered cookie value is displayed.
Finally, we can test the Code:Copy codeThe Code is as follows: <body onload = "checkCookie ()">
<P id = "cookieUser"> </p>
</Body>
