<!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)建一個歡迎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";
? ? ? 通過把 cookie 名稱、cookie 值和過期字符串相加，該函數(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是否已存在，即檢查頁面是否已經(jīng)訪問過
? ? function checkCookie() {
? ? ? var user = getCookie('username');
? ? ? if(user != "") {
? ? ? ? alert("歡迎 " + user + " 再次訪問");
? ? ? }else {
? ? ? ? user = prompt("請輸入你的名字：", "");//返回值 ?如果用戶單擊提示框的取消按鈕，則返回 null。如果用戶單擊確認(rèn)按鈕，則返回輸入字段當(dāng)前顯示的文本。
? ? ? ? if(user != "" && user != null) {
? ? ? ? ? setCookie("username", user, 30);//cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 過期的天數(shù)（exdays）。
? ? ? ? }
? ? ? }
? ? }
? </script>
</head>
<body onload="checkCookie()">
? <!-- onload屬性通常寫在body標(biāo)簽中，一旦把頁面的圖像，css等文件加載完后，就立即執(zhí)行一段JavaScript代碼 -->
</body>
</html>

二、實例演示

因為設(shè)置了過期時間，所以關(guān)閉瀏覽器再打開還是會顯示訪問信息

查看cookie情況：

可以清楚的看見cookie的存儲

三、實例剖析

方法解析：

alert("歡迎 " + user + " 再次訪問");

alert(message) 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。
message：要在 window 上彈出的對話框中顯示的純文本（而非 HTML 文本）

user = prompt("請輸入你的名字：", "");

prompt((text,defaultText) 方法用于顯示可提示用戶進(jìn)行輸入的對話框。
text：可選。要在對話框中顯示的純文本（而不是 HTML 格式的文本）。
defaultText：可選。默認(rèn)的輸入文本。

var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));

Date()方法返回當(dāng)前的日期時間

setTime(millisec)在1970年01月01日上添加毫秒數(shù)，然后返回新的日期。
millisec：必需的，是一個毫秒值

getTime() 方法可返回距 1970 年 1 月 1 日之間的毫秒數(shù)。
setTime和getTime方法都與1970年1月1日有關(guān)

var expires = "expires=" + d.toGMTString();

toGMTString() 方法可根據(jù)格林威治時間 (GMT) 把 Date 對象轉(zhuǎn)換為字符串，并返回結(jié)果。

var ca = document.cookie.split(';');

split() 方法用于把一個字符串分割成字符串?dāng)?shù)組。

var c = ca[i].trim();

去除字符串的頭尾空格

if(c.indexOf(name) == 0)

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。

return c.substring(name.length, c.length);

substring() 方法用于提取字符串中介于兩個指定下標(biāo)之間的字符。
substring() 方法返回的子串包括開始處的字符，但不包括結(jié)束處的字符。

實例執(zhí)行原理解析：

頁面js總共由三個函數(shù)組成，checkCookie()，setCookie()和getCookie()

<body onload="checkCookie()"></body>這里在body的onload屬性上寫了一個函數(shù)

checkCookie()，當(dāng)頁面加載完后，便會自動執(zhí)行checkCookie()函數(shù)里的代碼

首先通過getCookie()函數(shù)獲取用戶信息

getCookie函數(shù)中：
var ca = document.cookie.split(’;’);生成的ca字符串?dāng)?shù)組長度為1，就是cookie的值，如果有多個cookie的話，中間會用;符號分割

然后通過判斷獲取的字符是否為空來判斷獲取結(jié)果，如果不為空則直接彈出彈窗歡迎用戶，如果為空說明還沒有訪問過，彈出彈窗讓用戶輸入信息記錄，然后調(diào)用setCookie()函數(shù)來記錄用戶信息

在setCookie()函數(shù)中設(shè)置cookie方式

document.cookie = “username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC”;
通過把 cookie 名稱、cookie 值和過期時間字符串相加，該函數(shù)就設(shè)置了 cookie。

到此這篇關(guān)于JavaScript實例--創(chuàng)建一個歡迎cookie的文章就介紹到這了,更多相關(guān)JavaScript創(chuàng)建一個歡迎cookie內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: