KEEP CODING 代码改变世界
20180909 解析JS Cookie的设置,获取和检索
引用: JavaScript Cookie - by runoob.com
Cookie是储存在电脑文本文件中的数据，用于保存访问者的信息，并可以在下次打开页面时引用。
页面在设置/引用访问者信息时，需要在JavaScript中对Cookie进行设置，获取和检索三个函数。
例如当访问者首次访问网页时，网页会对访问者进行检索（访问者数据），无搜索信息时则页面需要访问者进行登录（设置数据），当下次再次登录时页面会自动返回访问者数据。
以下是我个人对使用Cookie保存用户名案例的解读：
1) 检索Cookie
页面在被打开(onload)时调用"检索函数"(checkCookie)，如果Cookie中存在访问者信息则调用"获取函数"(getCookie)并返回用户名，没有则调用"设置函数"(setCookie)对用户名进行设置。
1 <body onload="checkCookie()"> <!--当页面被打开时调用checkCookie()-->
2
3 <script>
4 function checkCookie()
5 {
6 var user = getCookie("username"); //调用getCookie()中的username，若不为空则返回值(用户名)
7 if (user!=""){
8 alert("welcome back " + user);
9 }
10 else {
11 user = prompt("Please enter your name: ",""); //页面弹出“请输入用户名”窗口，填写user的值
12 if (user!="" && user!=null){ //当输入的用户名不为空值时，将user作为属性调入setCookie()中
13 setCookie("username",user,30);
14 }
15 }
16 }
17 </script>
18
19 </body>
首次登陆会弹出窗口:
2. 设置Cookie
通过定义函数的参数setCookie(cname,cvalue,exdays)将访问者信息的值保存到"Cookie名称"，"Cookie值"和"Cookie过期时间"中.
在上述检索函数中，让我输入用户名"Akon Wong"后，函数将"username","Akon Wong",30这三个值保存到setCookie(cname,cvalue,exdays)中
1 function setCookie(cname,cvalue,exdays)
2 {
3 var d = new Date();
4 d.setTime(d.getTime()+(exdays*24*60*60*10000)); //设置时间为当前时间+exdays的毫秒值(在checkCookie中，设置exdays的值为30)
5 var expires = "expires="+d.toUTCString(); //设置时间为字符串显示 (toGMTString()已作废)
6 document.cookie = cname+"="+cvalue+";"+expires; //设置cookie的格式，通过checkCookie()后cookie的字符串结果为"username=Akon Wong;'到期日期'"
7 }
3. 获取Cookie
当下次再打开页面后，页面的checkCookie函数会在getCookie函数中获取到Cookie储存的用户名"Akon Wong"，并返回值。
1 function getCookie(cname)
2 {
3 var name = cname + "="; //定义一个值为"username="的变量
4 var ca = document.cookie.split(';'); //将cookie的字符串数据转变为以逗号分隔的数组
5 for (var i=0; i<ca.length; i++){ //通过for函数循环cookie的数据，
6 var c = ca[i].trim();
7 if (c.indexOf(name)==0){ return c.substring(name.length,c.length); } //当数据中包含关键字"name"时，返回"username="后面的字符(即用户名)
8 }
9 return ""; //若数据中没有找到关键字，则返回空值，进入checkCookie的初始值设置
10 }
再次登录的欢迎词:
完整函数:
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>