JavaScript study notes (7) Use javascript to create and store cookies_javascript skills

First, let’s take a look at the basics:
1. What is a cookie?
A cookie is a variable stored in the visitor’s computer. This cookie is sent each time the same 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 will be stored in a cookie. When visitors return to the site, they receive a welcome message like "Welcome John Doe!" The name is retrieved from the cookie.
•Password cookie When a visitor visits a page for the first time, he or she may fill in his/her password. Passwords can also be stored in cookies. When they visit the site again, the password is retrieved from the cookie.
•Date cookie When a visitor first visits your site, the current date can be stored in a cookie. When they visit the site again, they receive a message similar to this: "Your last visit was on Tuesday August 11, 2005!". The date is also retrieved from the cookie.
Let’s create a cookie instance below, how to create and remove cookies
javascript part of the code:

Copy code The code is as follows:

//Create 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 cookie
}
//Extract the value in 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; ivar cookieVal = cookieArr[i] .split("="); //Convert each set of cookies (cookie name and value) into an array
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //Return the cookie value that needs to be extracted
}
}
}
}
//Test cookie
function checkCookie() {
var cookieUser = document.getElementById(" cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "Hello " userName ", welcome back! ";
} else {
var value = prompt("Please enter username", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("Please enter your username! ");
}
}
}

Mainly lies in how to extract the cookie information we need. In this example, the getCookie function mainly converts the cookie information into an array. way to find the cookie value we need to extract. We can also match it through regular expressions, as follows:

Copy code Code 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 there is no cookie named userName stored in the browser, the user will be prompted to enter the username, and the page will be refreshed again. Display the entered cookie value. Finally, we can test the code:

Copy the code The code is as follows: