Cookie是存储在客户端浏览器中的小数据片段,它会在HTTP请求和服务器响应之间传递数据。Cookie通常用于记录用户的登录状态、页面访问记录、用户偏好等信息。
要设置Cookie,可以使用document.cookie
属性。例如:
document.cookie = "username=Tom; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
上面的代码将设置一个名为username
,值为Tom
的Cookie,并将其有效期设置为2022年12月18日12点整。路径设置为/
表示整个网站都可以访问这个Cookie。
获取Cookie的方法是通过访问document.cookie
属性来获取当前页面的所有Cookie。例如:
const cookies = document.cookie;
console.log(cookies);
上面的代码将在控制台输出当前页面的所有Cookie信息。
要删除Cookie,只需要将该Cookie的expires
属性设为过去的时间即可。例如:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
上面的代码将删除名为username
的Cookie。
Cookie虽然在很多场景下非常有用,但是它也有以下一些缺点:
在下面的例子中,用户点击一次按钮之后,网站将设置一个名为visited
,值为true
的Cookie,并将其有效期设置为1个月。当用户再次访问网站的时候,如果Cookie存在,则会提示用户之前访问过该网站。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例1</title>
</head>
<body>
<button id="btn">访问网站</button>
<script>
function setCookie(name, value, expires) {
const date = new Date();
date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(`${name}=`)) {
return cookie.substring(`${name}=`.length, cookie.length);
}
}
}
const visited = getCookie('visited');
if (visited === 'true') {
alert('你之前已经访问过该网站了!');
}
document.getElementById('btn').addEventListener('click', function() {
setCookie('visited', 'true', 30 /* 有效期一个月 */)
});
</script>
</body>
</html>
在下面的例子中,用户可以自定义一个文本框的颜色,并将其保存到Cookie中。每次用户再次访问该网站时,网站都会从Cookie中读取上次保存的颜色,并将文本框的颜色设置为该颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例2</title>
</head>
<body>
<input type="text" id="input" placeholder="在这里输入文本内容">
<div id="message"></div>
<script>
function setCookie(name, value) {
document.cookie = `${name}=${value};path=/`;
}
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(`${name}=`)) {
return cookie.substring(`${name}=`.length, cookie.length);
}
}
return '';
}
const color = getCookie('color');
if (color !== '') {
document.querySelector('#input').style.backgroundColor = color;
}
document.querySelector('#input').addEventListener('blur', function() {
const color = this.value;
this.style.backgroundColor = color;
setCookie('color', color);
document.querySelector('#message').innerHTML = `已成功将文本框的颜色设置为${color}`;
});
</script>
</body>
</html>
在上面的例子中,用户可以在输入框中输入任意颜色。当用户重新访问网站时,网站将从Cookie中读取之前保存的颜色,将文本框的颜色设置为该颜色。如果用户没有保存过颜色,则文本框将以默认的白色背景显示。
本文链接:http://task.lmcjl.com/news/9748.html