JavaScript Cookies

#Cookies are used to store user information on web pages.

What are Cookies?

Cookies are pieces of data that are stored in text files on your computer.

When the web server sends a web page to the browser, the server will not record the user's information after the connection is closed.

The role of Cookies is to solve "How to record user information on the client side":

• When a user visits a web page, his name can be recorded in the cookie.

• The next time the user visits this page, the user access record can be read in the cookie.

Cookies are stored as name/value pairs, as follows:

When the browser When a web page is requested from the server, the cookies belonging to that page are added to the request. The server obtains user information in this way.

Use JavaScript to create cookies

JavaScript can use the document.cookie attribute to create, read, and delete cookies.

In JavaScript, create a cookie as follows:

You can also add An expiration time (in UTC or GMT time). By default, cookies are deleted when the browser is closed:

You can use the path parameter to tell the browser the path to the cookie. By default, the cookie belongs to the current page.

Reading Cookies using JavaScript

In JavaScript, you can use the following code to read cookies:

	document.cookie will return all cookies in the form of strings, type format: cookie1=value; cookie2=value; cookie3=value;

Use JavaScript to modify cookies

In JavaScript, modifying cookies is similar to creating cookies, as follows:

Old cookies will be overwritten.

Deleting Cookies Using JavaScript

Deleting cookies is very easy. You only need to set the expires parameter to the previous time, as shown below, set to Thu, 01 Jan 1970 00:00:00 GMT:

Note that you do not have to specify the cookie value when you delete it.

Cookie String

document The .cookie attribute looks like an ordinary text string, but it is not.

Even if you write a complete cookie string in document.cookie, the cookie will be lost when you re-read the cookie information. Information is displayed in the form of name/value pairs.

If you set a new cookie, the old cookie will not be overwritten. The new cookie will be added to document.cookie, so if you re-read document.cookie you will get data like this:

cookie1=value; cookie2=value;

if You need to find a specific cookie value, you must create a JavaScript function to find the cookie value in the cookie string.

JavaScript Cookie Example

In the following example, we will create a cookie to store the visitor name.

First, when a visitor visits the web page, he will be asked to fill in his name. This name will be stored in the cookie.

The next time the visitor visits the page, he will see a welcome message.

In this example we will create 3 JavaScript functions:

1. Function to set cookie value

2. Get cookie value Function

3. Function to detect cookie value

Function to set cookie value

First, we create a The function is used to store the visitor's name:

Function analysis:

Among the above function parameters, the name of the cookie is cname, the value of the cookie is cvalue, and the expiration time of the cookie expires is set.

This function sets the cookie name, cookie value, and cookie expiration time.

Function to get cookie value

Then, we create a function user to return the value of the specified cookie:

Function analysis:

The parameter of cookie name is cname.

Create a text variable for retrieving the specified cookie: cname + "=".

Use semicolons to split the document.cookie string, and assign the split string array to ca (ca = document.cookie.split(';')).

Loop through the ca array (i=0;i<ca.length;i++), then read each value in the array and remove leading and trailing spaces (c=ca[i].trim()).

If the cookie is found (c.indexOf(name) == 0), return the cookie value (c.substring(name.length,c.length).

If the cookie is not found, Returns "".

Function to detect the cookie value

Finally, we can create a function that detects whether the cookie is created.

If the cookie is set, it will be displayed. A greeting message.

If no cookie is set, a pop-up window will be displayed to ask for the visitor's name, and the setCookie function will be called to store the visitor's name for 365 days:

Complete example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	}
	return "";
}
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("Welcome again " + user);
	}
	else {
		user = prompt("Please enter your name:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>
	
</html>

The following example executes the checkCookie() function when the page is loaded.