Cookie data is stored in a computer text file, save the information for visitors, and can be referenced when you open the next page. 20,180,909 resolve JS Cookie settings, access and retrieval

20,180,909 resolve JS Cookie settings, access and retrieval

Cookie data is stored in a computer text file, save the information for visitors, and can be referenced when you open the next page.

When you set the page / references visitor information, the need for Cookie settings in JavaScript, access and retrieval three functions.

For example, when a visitor first visit the page, the page will be retrieved visitors (visitor data), the page visitors need to log in (setting data) when there is no search for information, the page will automatically return data when a visitor to log in again next time .

The following are my personal use to save the user name Cookie Case Interpretation:

1) retrieves Cookie

　　Page calls "retrieval functions" (checkCookie) when opened (onload), if there is the Cookie visitor information is called "getters" (getCookie) and returns the user name, do not you call the "Set function" (setCookie) to the user name set.

1 <body onload = "checkCookie ( )"> <-! Invoked when the page is opened checkCookie () -> 
 2 
 . 3 <Script> 
 . 4 checkCookie function () 
 . 5 { 
 . 6 var = the getCookie User ( "username"); // call the getCookie () in the username, if a null value (the user name) is returned 
 . 7 IF (user = "!") { 
 . 8 Alert ( "Back available for purchase" user +); 
 . 9}      
10 {the else 
. 11 = user prompt ( "Please enter your name: ", ""); // page pop-up "Please enter your user name" window, fill in the value of the user 
{// when the input ( "&& user = null 12 if user =!"!) when the user name is not nULL, the setCookie transferred to the user as the attribute () in 
13 setCookie ( "username", user , 30);
14             }
15         }
16     }
17 </script>
18 
19 </body>

The first landing window will pop up:

2. Set Cookie

　　SetCookie parameter defined functions (cname, cvalue, exdays) to save the value of visitors' information to the "Cookie Name", "Cookie value" and "Cookie Expiration Time".

　　In the search function, let me enter a user name "Akon Wong", the function "username", "Akon Wong", these three values to save 30 setCookie (cname, cvalue, exdays) in

The setCookie function. 1 (CNAME, cValue, exdays) 
2 { 
. 3 = D var new new a Date (); 
. 4 d.setTime (d.getTime () + (exdays * 24 * 60 * 60 * 10000)); // set time (30 checkCookie value, set exdays) of the current time + exdays milliseconds 
5 var expires = "expires =" + d.toUTCString (); // set character string display time (toGMTString () obsolete) 
6 document.cookie = cname + "=" + cvalue + ";" + expires; // set the cookie format by checkCookie () is the result after the cookie string "username = Akon Wong; 'expiration date'" 
7}

3. Get Cookie

　　When the next time you open the page, checkCookie function page will be available at Cookie getCookie function to store the user name "Akon Wong", and return values.

The getCookie function. 1 (CNAME) 
 2 { 
 . 3 CNAME + var name = "="; // definition of a value of "username =" Variable 
 4 var ca = document.cookie.split ( '; '); // cookie of the string data into a comma-delimited array 
 5 for (var i = 0; i <ca.length; i ++) {// data for function loops through cookie, 
 . 6 var C = CA [I] .trim (); 
 7 if (c.indexOf (name) == 0) {return c.substring (name.length, c.length);} // when the data with the keyword "name", Back "username =" characters following (i.e., user name) 
 . 8} 
 . 9 return ""; // data if no keywords found, null is returned into the initial value setting checkCookie 
10}

Welcome once again to log:

Complete function:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Set Cookies</title>
 6     </head>
 7     <body onload="checkCookie()">
 8         
 9         <p id="demo"></p>
10         
11         <script>
12             function setCookie(cname,cvalue,exdays)
13             {
14                 var d = new Date();
15                 d.setTime(d.getTime()+(exdays*24*60*60*1000));   //set up the due day of cookie
16                 var expires = "expires="+d.toUTCString();        
17                 document.cookie = cname+"="+cvalue+"; "+expires; 
18                 //the type of cookie: cookieName=value; due day
19             }
20             
21             function getCookie(cname)
22             {
23                 var name = cname + "=";
24                 var ca   = document.cookie.split(';'); //return 'the "username";username; time'
25                 for (var i=0; i<ca.length; i++){
26                     var c = ca[i].trim();
27                     if (c.indexOf(name)==0){ return c.substring(name.length,c.length); }
28                 }
29                 return "";
30             }
31             
32             function checkCookie()
33             {
34                 //run getCookie() to check if the username is exist.
35                 var user = getCookie("username");
36                 if (user!=""){
37                     alert("welcome back " + user);
38                 }
39                 else {
40                     user = prompt("Please enter your name: ","");   
41                     //prompt() can return the message that user input
42                     if (user!="" && user!=null){
43                         //run setCookie() to store the messages into cookie.
44                         setCookie("username",user,30);
45                     }
46                 }
47             }
48         </script>
49     </body>
50 </html>

引用: JavaScript Cookie - by runoob.com