引用: 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 cookie16 ????????????????var expires = "expires="+d.toUTCString(); ???????17 ????????????????document.cookie = cname+"="+cvalue+"; "+expires; 18 ????????????????//the type of cookie: cookieName=value; due day19 ????????????}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 input42 ????????????????????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>20180909 解析JS Cookie的设置,获取和检索
原文地址：https://www.cnblogs.com/goakon/p/9613940.html