关于"什么是cookie"的讲解:
Cookie指的是一种服务器发送给浏览器的小型文本文件,在浏览器端保存用户的登录状态、购物车信息等。在下次用户访问同样的网站时,浏览器会将存在本地的Cookie信息发送给服务器,服务器根据接收到的Cookie信息来进行相应的处理。
Cookie有以下特点:
- Cookie由服务器生成,浏览器存储。
- 每次请求时需要将Cookie发送给服务器端。
- Cookie有过期时间,可以在指定时间后自动失效或手动删除。
JS手动创建和存储Cookie的方法:
可以通过JS编写Cookie,然后将其存储至浏览器中。一下是具体实现的步骤:
使用document.cookie
属性来操作Cookie。document.cookie
返回的是当前网站所有Cookie的键值对字符串。
编写方法来创建Cookie。例如,创建一个名为foo的Cookie,值为bar,过期时间为一天后:
function createCookie(name, value, days) {
let expires;
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
createCookie('foo', 'bar', 1); // 有效期1天
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i=0;i < ca.length;i++) {
let c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
const cookieValue = readCookie('foo');
console.log(cookieValue); // bar
以上是手动创建和存储Cookie的完整攻略,以下列举两个代码示例说明:
示例一:实现一个保存登录账号的功能,通过Cookie记录用户登录状态
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username == "admin" && password == "123") {
createCookie("user", username, 7);
window.location.href = "homepage.html";
} else {
alert("用户名或密码错误,请重新输入");
}
}
上面的 login() 方法实现了用户登录的逻辑,在用户登录成功后,通过 createCookie() 方法创建了一个名为user,值为用户名的Cookie,并设置了7天的有效期。在用户访问其他需要登录才能访问的页面时,可以通过读取Cookie来验证用户的登录状态。
示例二:实现一个保存用户选择主题的功能,通过Cookie记录用户选择的主题
function changeTheme(theme) {
document.body.className = theme;
createCookie("theme", theme, 30);
}
const themeCookie = readCookie("theme");
if (themeCookie) {
document.body.className = themeCookie; // 设置页面主题
}
上面的 changeTheme() 方法实现了切换主题的逻辑,并且通过 createCookie() 方法将用户选择的主题记录为名为theme的Cookie,并设置了30天的有效期。在用户下次访问同一个网站时,可以通过 readCookie() 方法读取用户选择的主题,并设置页面的主题颜色。
本文链接:http://task.lmcjl.com/news/8835.html