1.cookie封装方法
// 创建一个新的Cookie
function createCookie(name, value, daysToExpire) {
var expires = "";
if (daysToExpire) {
var date = new Date();
date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// 读取 Cookie 的值
function getCookieValue(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) == ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) == 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// 删除 Cookie
function deleteCookie(name) {
createCookie(name, "", -1);
}
2.html代码演示
<!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>Document</title>
</head>
<style>
.document_textBorder{
display: flex;
border-top: 1px solid #f5f5f5;
}
.document_textBorder:last-child{
border-bottom: 1px solid #f5f5f5;
}
.document_textBorder_left{
width: 30%;
padding: 20px;
display: inline-block;
border-right: 1px solid #f5f5f5;
}
.document_textBorder_right{
width: 70%;
padding: 20px;
display: inline-block;
}
.document_textTop{
padding: 40px 20px;
}
.document_textTop_text:not(:first-child){
padding-top: 15px;
}
</style>
<body>
<div class="button">
Cookie 前点击
</div>
<div class="document_textTop">
</div>
<div class="document_text">
</div>
<script>
// 创建一个新的Cookie
function createCookie(name, value, daysToExpire) {
var expires = "";
if (daysToExpire) {
var date = new Date();
date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// 读取 Cookie 的值
function getCookieValue(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) == ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) == 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// 删除 Cookie
function deleteCookie(name) {
createCookie(name, "", -1);
}
var isHidden = true; // 初始状态为隐藏
// 示例用法
createCookie("user_id", "123", 30);
createCookie("session_token", "abcdef123456", 30);
// 数组
var myArray = [1, 2, 3, "apple", "banana"];
createCookie("my_array_cookie", JSON.stringify(myArray), 30);
document.querySelector('.button').onclick=function(){
if(isHidden){
document.querySelector('.button').innerHTML='点击啦'
let myTime =setInterval(() => {
document.querySelector('.button').innerHTML='再次点击隐藏';
clearInterval(myTime)
}, 3000);
var userId = getCookieValue("user_id");
var sessionToken = getCookieValue("session_token");
document.getElementsByClassName('document_textTop')[0].innerHTML=`<div class="document_textTop_text">User ID: ${userId};</div>`
document.getElementsByClassName('document_textTop')[0].innerHTML+=`<div class="document_textTop_text">Session Token: ${sessionToken};</div>`
console.log("User ID: " + userId);
console.log("Session Token: " + sessionToken);
var myArrayText = getCookieValue("my_array_cookie");
console.log(myArrayText,"aaa");
// 将存储在 Cookie 中的字符串解析为数组
var parsedArray = JSON.parse(myArrayText);
parsedArray.forEach((item, index) => {
console.log("第"+index+"个:"+item);
// 渲染到页面
let myText = ``
myText= `
<div class="document_textBorder">
<span class="document_textBorder_left">
第${index}个:
</span>
<span class="document_textBorder_right">
${item}
</span>
<div>
`
document.getElementsByClassName('document_text')[0].innerHTML+=myText;
});
isHidden = false;
}else{
document.querySelector('.button').innerHTML='点击啦'
let myTime =setInterval(() => {
document.querySelector('.button').innerHTML='再次点击显示';
clearInterval(myTime)
}, 3000);
// 如果当前是显示状态,单击按钮后隐藏内容
document.querySelector('.document_textTop').innerHTML = '';
document.querySelector('.document_text').innerHTML = '';
isHidden = true; // 切换状态为隐藏
}
}
// 删除 Cookie
deleteCookie("session_token");
</script>
</body>
</html>