JavaScript存储Cookie问题求助：页面重载后Cookie未保留

嘿，我来帮你找找Cookie没保留的原因！这种情况大多是因为设置Cookie时漏掉了关键参数，或者写法不对，我给你拆解几个常见问题和修复方法：

最常见的原因：没设置持久化过期时间 #

默认情况下，用document.cookie设置的Cookie是会话Cookie——这种Cookie只在当前浏览器会话有效，一旦关闭浏览器（部分场景下重载页面也可能丢失），就会被清除。如果想让它在浏览器重启、页面重载后都保留，必须手动设置expires或max-age参数，把它变成持久Cookie。

比如你之前的代码可能只是简单写了：

document.cookie = `username=${username}`;

这种写法就会导致Cookie随会话结束消失，必须加上过期时间才能持久化。

路径（path）设置问题 #

如果你的Cookie是在某个子页面设置的，却没指定path=/，那只有该子路径下的页面能读取到Cookie，回到根路径页面重载后就看不到了。所以最好统一设置path=/，让整个网站的页面都能访问这个Cookie。

正确的Cookie操作示例 #

我给你写个完整的示例代码，涵盖设置、读取Cookie的正确方式：

设置Cookie的函数 #

function setUsernameCookie(username) {
  // 设置Cookie有效期为7天，你可以按需调整时长
  const expiryDate = new Date();
  expiryDate.setTime(expiryDate.getTime() + (7 * 24 * 60 * 60 * 1000));
  
  // 用encodeURIComponent处理姓名里的特殊字符，避免Cookie格式错误
  document.cookie = `username=${encodeURIComponent(username)}; expires=${expiryDate.toUTCString()}; path=/`;
}

读取Cookie的函数 #

function getUsernameCookie() {
  const cookieName = "username=";
  const decodedCookies = decodeURIComponent(document.cookie);
  const cookieList = decodedCookies.split(';');

  for (let cookie of cookieList) {
    // 去掉Cookie前面的空格，避免匹配失败
    cookie = cookie.trim();
    if (cookie.startsWith(cookieName)) {
      // 提取姓名值
      return cookie.substring(cookieName.length);
    }
  }
  return "";
}

页面加载逻辑 #

window.addEventListener('load', function() {
  let username = getUsernameCookie();
  
  if (!username) {
    username = prompt("请输入你的姓名：");
    if (username) {
      setUsernameCookie(username);
    }
  }
  
  // 把姓名显示在页面上，假设你页面里有个id为greeting的元素
  const greetingEl = document.getElementById('greeting');
  if (greetingEl && username) {
    greetingEl.textContent = `欢迎回来，${username}！`;
  }
});

其他可能的排查点 #

• 检查浏览器是否禁用了Cookie：可以在浏览器隐私设置里确认，确保允许本站设置Cookie。
• 隐私/无痕模式：这种模式下很多浏览器会在关闭窗口后清除所有Cookie，测试时记得用普通模式。
• 过期时间是否设置错误：比如不小心把过期时间设成了过去的时间，那Cookie会立即失效。

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