Author：Mr.柳上原
- 付出不亞於任何的努力
- 願我們所有的努力，都不會被生活辜負
- 不忘初心，方得始終
這篇筆記要不要上傳
我糾結了一下
基本上
現在
在企業開發中
幾乎很少使用到cookie了
現在基本上都是H5本地緩存
token之類的做用戶登錄驗證
node或許會用到一點點
想想還是發上來吧
沒準哪天就有用了
<!DOCTYPE html> <!-- 文檔類型：標準html文檔 -->
<html lang='en'> <!-- html根標籤 翻譯文字：英文 -->
<head> <!-- 網頁頭部 -->
<meat charset='UTF-8'/> <!-- 網頁字符編碼 -->
<meat name='Keywords' content='關鍵詞1,關鍵詞2'/>
<meat name='Description' content='網站說明'/>
<meat name='Author' content='作者'/>
<title>前端59期學員作業</title> <!-- 網頁標題 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外鏈樣式表 -->
<style type='text/css'> /*內部樣式表*/
</style>
</head>
<body> <!-- 網頁主幹：可視化區域 -->
<script>
/*
cookie：
數據緩存，保存用戶的操作狀態
http無狀態，不會保留用戶狀態
cookie必須在服務器環境下使用
cookie的默認有效期是即時的，瀏覽器關閉後就消失了
Request Headers 請求頭
cookie
當前域的cookie會被主動發到服務器
後臺接受到cookie，發送用戶當前對應狀態的頁面
*/
// 獲取當前頁面的cookie數據
console.log(document.cookie);
// 設置當前頁面的cookie數據
document.cookie = "username=fengyu";
document.cookie = "password=123456";
// 注意：=不是賦值，而是設置一條新的cookie值，與上一條同時存在，但是當右邊字符串內的值左邊值名相同時，會覆蓋上一條
// 設置當前頁面的cookie有效期
document.cookie = "username=fengyu; expires=" + new Date(Date.now() + 60 * 1000).toUTCString(); // 設置一分鐘後過期
// 注意：設置當前時間的時間戳
// 獲取cookie的值
const getCookie = attr => {
const arr = document.cookie.match(new RegExp("\\b" + attr + "=([^;]+)(;|$)"));
return arr ? arr[1] : "";
}
getCookie("username");
console.log(getCookie("username"));
// 設置cookie的值
const setCookie = (obj1, time = 0) => {
const timer = new Date(Date.now() + time * 1000*60*60*24).toUTCString();
for(var key in obj1){
document.cookie = `${key}=${obj1[key]}; expires=${timer}`;
}
}
setCookie({
username: "fengyu",
password: 123456
}, 2)
// 刪除cookie的值
const delCookie = arrt => {
let obj2 = {};
obj2[arrt] = "";
setCookie(obj2, -1)
}
// cookie實例：用戶登錄，保存cookie
// 上次訪問時間
const lastTime = getCookie("lastTime");
if (lastTime){
// 爲true表示用戶不是第一次登錄
last.innerHTML = "您上次訪問時間是：" + lastTime;
} else {
// 爲false表示用戶第一次登錄
last.innerHTML = "歡迎大爺第一次來玩耍"
}
const time = new Date().toLocaleString();
now.innerHTML = "本次登錄時間：" + time;
setCookie({
lastTime: time
}, 365)
/*
session：
後端用來存儲緩存信息的方法
前端cookie值發送給後端
後端用session接收，並返回對應數據
*/
</script>
</body>
</html>