JavaScript实现Cookie设置及基于Cookie存在性的页面跳转方案问询

没问题，我来帮你搞定Cookie的设置和读取，结合你的需求一步步实现：

1. 在page.html中设置Cookie #

当用户访问page.html时，我们可以通过document.cookie API设置Cookie，关键要注意Cookie的作用域和有效期，确保其他页面能正常读取到它。

在page.html的脚本中添加以下代码：

// 页面加载完成后设置Cookie
window.addEventListener('load', function() {
  // 设置名为visitedPage的Cookie，值为true
  // path=/ 确保整个域名下的页面都能访问该Cookie
  // max-age=86400 设置有效期为1天（单位：秒）
  document.cookie = "visitedPage=true; path=/; max-age=86400";
  
  // 如果是HTTPS网站，建议加上secure属性，提升安全性：
  // document.cookie = "visitedPage=true; path=/; max-age=86400; secure";
  
  // 可选：添加SameSite属性防止跨站请求问题
  // document.cookie = "visitedPage=true; path=/; max-age=86400; SameSite=Lax";
});

参数说明： #

• visitedPage=true：Cookie的键值对，你可以自定义键名和值
• path=/：指定Cookie的作用路径为根目录，这样redirect.html（同域名下的页面）才能读取到
• max-age=86400：设置Cookie的有效期为1天，若不设置，Cookie会在浏览器关闭后失效（会话级Cookie）

2. 在redirect.html中检查Cookie并重定向 #

接下来在redirect.html中，我们需要先读取Cookie，判断是否存在之前设置的visitedPage，如果存在就触发重定向。

先封装一个通用的Cookie读取函数，方便后续调用：

// 封装函数：根据Cookie名称获取对应的值
function getCookie(cookieName) {
  // 将Cookie字符串拆分为单个Cookie的数组，并去除空格
  const cookieList = document.cookie.split(';').map(item => item.trim());
  
  // 遍历数组查找目标Cookie
  for (const cookie of cookieList) {
    if (cookie.startsWith(`${cookieName}=`)) {
      // 拆分键值对并返回值
      return cookie.split('=')[1];
    }
  }
  
  // 未找到目标Cookie时返回null
  return null;
}

然后在页面加载时执行检查和重定向逻辑：

// 页面加载完成后执行检查
window.addEventListener('load', function() {
  const hasVisited = getCookie('visitedPage');
  
  // 如果Cookie存在且值为true，就重定向到page.html
  if (hasVisited === 'true') {
    window.location.href = 'https://www.example.com/page.html';
  }
});

关键注意事项 #

• Cookie作用域：一定要设置path=/，如果省略，Cookie默认的作用路径是当前页面的路径（比如page.html的路径是/，这里其实默认也能访问，但显式设置更稳妥，避免后续页面路径变更导致读取失败）
• 有效期设置：如果需要用户下次访问时仍能触发重定向，必须设置max-age或expires，否则Cookie只会在当前浏览器会话中存在
• HTTPS安全配置：如果你的网站使用HTTPS协议，建议添加secure属性，确保Cookie仅在HTTPS连接下传输，避免被窃取
• SameSite属性：添加SameSite=Lax或SameSite=Strict可以有效防止跨站请求伪造（CSRF）问题，提升网站安全性

内容的提问来源于stack exchange，提问作者Kim Santos