JavaScript学习笔记030-前端缓存cookie0初识后
2018-11-14 本文已影响1人
Mr柳上原
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>
