20180909 解析JS Cookie的設置,獲取和檢索
阿新 • • 發佈：2018-09-09
sub 空值 tps color func spl 獲取cookie asc spa
引用: 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>
20180909 解析JS Cookie的設置,獲取和檢索