快捷導(dǎo)航

JavaScript實(shí)例--創(chuàng)建一個(gè)歡迎cookie

更新時(shí)間：2022年01月26日 17:00:16 作者：程序員云錦?

這篇文章主要介紹了JavaScript實(shí)例--創(chuàng)建一個(gè)歡迎cookie，

一、實(shí)例代碼

<!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 名稱(chēng)、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)訪(fǎng)問(wèn)過(guò)
? ? function checkCookie() {
? ? ? var user = getCookie('username');
? ? ? if(user != "") {
? ? ? ? alert("歡迎 " + user + " 再次訪(fǎng)問(wèn)");
? ? ? }else {
? ? ? ? user = prompt("請(qǐng)輸入你的名字：", "");//返回值 ?如果用戶(hù)單擊提示框的取消按鈕，則返回 null。如果用戶(hù)單擊確認(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屬性通常寫(xiě)在body標(biāo)簽中，一旦把頁(yè)面的圖像，css等文件加載完后，就立即執(zhí)行一段JavaScript代碼 -->
</body>
</html>

二、實(shí)例演示

因?yàn)樵O(shè)置了過(guò)期時(shí)間，所以關(guān)閉瀏覽器再打開(kāi)還是會(huì)顯示訪(fǎng)問(wèn)信息

查看cookie情況：

可以清楚的看見(jiàn)cookie的存儲(chǔ)

三、實(shí)例剖析

方法解析：

alert("歡迎 " + user + " 再次訪(fǎng)問(wèn)");

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

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

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

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)

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

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

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

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

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

去除字符串的頭尾空格

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

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

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

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

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

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

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

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

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

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

然后通過(guò)判斷獲取的字符是否為空來(lái)判斷獲取結(jié)果，如果不為空則直接彈出彈窗歡迎用戶(hù)，如果為空說(shuō)明還沒(méi)有訪(fǎng)問(wèn)過(guò)，彈出彈窗讓用戶(hù)輸入信息記錄，然后調(diào)用setCookie()函數(shù)來(lái)記錄用戶(hù)信息

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

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

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

您可能感興趣的文章: