一、實(shí)例代碼1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>創(chuàng)建一個(gè)歡迎cookie</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; /* document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC"; 通過(guò)把 cookie 名稱、cookie 值和過(guò)期字符串相加，該函數(shù)就設(shè)置了 cookie。 */ } 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 ""; } } //檢查cookie是否已存在，即檢查頁(yè)面是否已經(jīng)訪問過(guò) function checkCookie() { var user = getCookie('username'); if(user != "") { alert("歡迎 " + user + " 再次訪問"); }else { user = prompt("請(qǐng)輸入你的名字：", "");//返回值 如果用戶單擊提示框的取消按鈕，則返回 null。如果用戶單擊確認(rèn)按鈕，則返回輸入字段當(dāng)前顯示的文本。 if(user != "" && user != null) { setCookie("username", user, 30);//cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 過(guò)期的天數(shù)（exdays）。 } } } </script> </head> <body onload="checkCookie()"> <!-- onload屬性通常寫在body標(biāo)簽中，一旦把頁(yè)面的圖像，css等文件加載完后，就立即執(zhí)行一段JavaScript代碼 --> </body> </html> |
二、實(shí)例演示
因?yàn)樵O(shè)置了過(guò)期時(shí)間，所以關(guān)閉瀏覽器再打開還是會(huì)顯示訪問信息 查看cookie情況： 
可以清楚的看見cookie的存儲(chǔ)
三、實(shí)例剖析方法解析： 1 | alert("歡迎 " + user + " 再次訪問"); |
alert(message) 方法用于顯示帶有一條指定消息和一個(gè) OK 按鈕的警告框。
message：要在 window 上彈出的對(duì)話框中顯示的純文本（而非 HTML 文本） 1 | user = prompt("請(qǐng)輸入你的名字：", ""); |
prompt((text,defaultText) 方法用于顯示可提示用戶進(jìn)行輸入的對(duì)話框。
text：可選。要在對(duì)話框中顯示的純文本（而不是 HTML 格式的文本）。
defaultText：可選。默認(rèn)的輸入文本。 1 2 | var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); |
Date()方法返回當(dāng)前的日期時(shí)間 setTime(millisec)在1970年01月01日上添加毫秒數(shù)，然后返回新的日期。
millisec：必需的，是一個(gè)毫秒值 getTime() 方法可返回距 1970 年 1 月 1 日之間的毫秒數(shù)。
setTime和getTime方法都與1970年1月1日有關(guān) 1 | var expires = "expires=" + d.toGMTString(); |
toGMTString() 方法可根據(jù)格林威治時(shí)間 (GMT) 把 Date 對(duì)象轉(zhuǎn)換為字符串，并返回結(jié)果。 1 | var ca = document.cookie.split(';'); |
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。 去除字符串的頭尾空格 1 | if(c.indexOf(name) == 0) |
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。 1 | return c.substring(name.length, c.length); |
substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
substring() 方法返回的子串包括 開始 處的字符，但不包括 結(jié)束 處的字符。 實(shí)例執(zhí)行原理解析： 頁(yè)面js總共由三個(gè)函數(shù)組成，checkCookie()，setCookie()和getCookie() <body onload="checkCookie()"></body>這里在body的onload屬性上寫了一個(gè)函數(shù)
checkCookie()，當(dāng)頁(yè)面加載完后，便會(huì)自動(dòng)執(zhí)行checkCookie()函數(shù)里的代碼 首先通過(guò)getCookie()函數(shù)獲取用戶信息 getCookie函數(shù)中：
var ca = document.cookie.split(’;’);生成的ca字符串?dāng)?shù)組長(zhǎng)度為1，就是cookie的值，如果有多個(gè)cookie的話，中間會(huì)用;符號(hào)分割
然后通過(guò)判斷獲取的字符是否為空來(lái)判斷獲取結(jié)果，如果不為空則直接彈出彈窗歡迎用戶，如果為空說(shuō)明還沒有訪問過(guò)，彈出彈窗讓用戶輸入信息記錄，然后調(diào)用setCookie()函數(shù)來(lái)記錄用戶信息 在setCookie()函數(shù)中設(shè)置cookie方式 document.cookie = “username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC”;
通過(guò)把 cookie 名稱、cookie 值和過(guò)期時(shí)間字符串相加，該函數(shù)就設(shè)置了 cookie。
到此這篇關(guān)于JavaScript實(shí)例--創(chuàng)建一個(gè)歡迎cookie的文章就介紹到這了。 | 
大家都在看
