获取用户输入后Cookies无法加载的技术求助

问题原因 #

直接用file://协议打开本地HTML文件时，现代浏览器出于安全策略限制，会阻止Cookie的设置与读取，这就是你本地运行代码无效但在线环境正常的核心原因。

解决办法 #

搭建本地HTTP服务器（推荐） #

这是最安全且通用的方式：

• Python环境：打开命令行，进入HTML文件所在目录，运行对应命令：
  • Python3：python -m http.server 8000
  • Python2：python -m SimpleHTTPServer 8000
    之后在浏览器访问 http://localhost:8000/你的文件名.html 即可正常操作Cookie
• Node.js环境：先全局安装http-server工具，命令行执行 npm install -g http-server，然后进入文件目录运行 http-server，按照提示的地址访问即可

临时修改浏览器设置（不推荐） #

可以调整浏览器安全设置允许file://协议使用Cookie，但这会降低浏览器的安全性，仅适合临时测试使用。

满足需求的修改后代码 #

以下代码在页面上直接显示Cookie内容，替代原有的alert提示：

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  const displayArea = document.getElementById('cookie-display');
  if (user != "") {
    displayArea.textContent = "欢迎回来！当前Cookie值：username=" + user;
  } else {
     user = prompt("请输入你的名字：","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
       displayArea.textContent = "已设置Cookie：username=" + user;
     }
  }
}
</script>
</head>

<body onload="checkCookie()">
  <div id="cookie-display"></div>
</body>

</html>

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