细讲前端设置cookie 储存用户登录信息

在网站中，为了提高用户体验和保护用户隐私，我们通常会使用cookie来储存用户的登录信息，使得用户在下次访问时不需要重新登录。

什么是cookie？

cookie是存储在用户计算机上的小文件，它可以在用户浏览网站时向网站发送数据。cookie通常用于记录用户的偏好、状态信息和登录凭证等，以便下次访问时使用。

如何设置cookie？

在前端，一般使用document.cookie设置cookie。假设我们要设置一个名为token的cookie，它的值为一个随机字符串，它的过期时间为一周：

let token = 'abcedfghijklmnopqrstuvwxyz123456';
let expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 过期时间为一周
document.cookie = `token=${token};expires=${expires};path=/`;

上述代码中，使用了模板字符串来构造cookie的字符串形式，expires选项表示cookie的过期时间。

path选项指定了访问该cookie的路径。例如，'/'表示所有路径都可以访问该cookie，而'/user'表示只有路径为/user的页面才能访问该cookie。

如何获取cookie？

使用document.cookie可以获取到当前所有的cookie：

let cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim().split('=');
    let name = cookie[0];
    let value = cookie[1];
    // ...
}

上述代码中，首先使用split(';')将document.cookie拆分为多个键值对，然后使用trim()和split('=')获取到每个cookie的名字和值。

如何删除cookie？

删除cookie可以设置它的过期时间，在当前时间之前即可：

let expires = new Date(Date.now() - 1); // 过期时间为当前时间之前，即已过期
document.cookie = `token=;expires=${expires};path=/`;

如何使用cookie记录用户登录状态？

通常，我们可以在用户成功登录后将用户的用户ID或者一个随机生成的token设置为cookie，然后在每个需要登录的页面根据cookie检查用户是否已经登录，如果已经登录，则从cookie中获取用户的登录状态。

例如，将用户ID作为cookie储存：

let userId = '123456';
let expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 过期时间为一周
document.cookie = `userId=${userId};expires=${expires};path=/`;

在需要检查登录状态的地方，可以从cookie中获取用户的userId值：

let userId = '';
let cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim().split('=');
    if (cookie[0] === 'userId') {
        userId = cookie[1];
        break;
    }
}
if (userId) {
    console.log('已登录，用户ID为：' + userId);
} else {
    console.log('未登录');
}

总结

上述就是关于前端使用cookie储存用户登录信息的介绍。当然，我们也可以使用sessionStorage和localStorage等各种存储方式储存用户登录信息，不同的存储方式各有优劣，需要根据具体情况选择合适的方法。