JavaScript Cookie 学习笔记
什么是 Cookie？
Cookie 是浏览器中存储少量数据的一种机制。可以使用 JavaScript 来读取、创建和修改 Cookie，以便在用户访问同一网站时提供持久化数据。
创建 Cookie
我们可以使用 document.cookie 属性来创建新的 Cookie。以下是创建一个名为 username 的 Cookie 的示例：
javascriptCopy Codedocument.cookie = "username=John Doe";
读取 Cookie
要读取 cookie，我们可以简单地通过 document.cookie 属性获取所有 cookie。以下是获取名为 username 的 Cookie 的示例：
javascriptCopy Codelet cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let [name, value] = cookies[i].split('=');
if (name.trim() === 'username') {
console.log(value);
}
}
修改 Cookie
要修改 cookie 值，则只需使用与创建 cookie 相同的方法即可：
javascriptCopy Codedocument.cookie = "username=Jane Doe";
需要注意的是，当修改 Cookie 时，你需要确保在 cookie 名字前添加一个“+”号，否则会将此操作视为创建一个新的 Cookie。
删除 Cookie
要删除 cookie，请设置 Cookie 的过期时间为过去的某个日期/时间：
javascriptCopy Codedocument.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
上述示例将 username Cookie 的过期时间设置为 1970 年 1 月 1 日之前的时间，因此浏览器会将该 Cookie 视为过时并将其删除。
示例
以下是一个使用 cookie 的简单示例，用于在网站上保存用户首选色彩：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Cookie</title>
</head>
<body>
<h1>JavaScript Cookie</h1>
<label for="color-picker">Choose your favorite color:</label>
<input type="color" id="color-picker">
<script>
let colorInput = document.getElementById('color-picker');
// 检查是否有 cookie 存在
let color = readCookie('color');
if (color) {
colorInput.value = color;
document.body.style.backgroundColor = color;
}
// 添加事件监听器
colorInput.addEventListener('change', function() {
document.body.style.backgroundColor = colorInput.value;
createCookie('color', colorInput.value, 7);
});
// 创建新 cookie
function createCookie(name, value, days) {
let expires = '';
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// 读取 cookie
function readCookie(name) {
let nameEQ = name + "=";
let cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let 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;
}
</script>
</body>
</html>
此代码将在浏览器中显示一个颜色选择器，允许用户选择他们喜欢的颜色，并使用 cookie 在网站之间保持他们的首选颜色。