求助：JavaScript Cookie无法存储，W3与MDN示例代码均无效

问题根源 #

你直接用Visual Studio打开本地HTML文件时，页面使用的是file://协议，但你设置Cookie时添加了Secure属性——这个属性强制要求Cookie只能通过HTTPS协议传输，file://协议不满足这个条件，导致Cookie完全无法被写入。另外SameSite=None属性必须配合Secure使用，这也进一步限制了本地file://环境下的Cookie操作。

修复方案 #

1. 简化Cookie属性（本地测试用）
   移除Secure属性，同时根据需求调整SameSite（非跨站场景用Lax足够，也可以直接省略），修改后的Cookie设置代码如下：

   document.cookie = "name=oeschger; SameSite=Lax";
   document.cookie = "favorite_food=tripe; SameSite=Lax";
   

2. 使用本地HTTP服务器访问页面
   不要直接通过file://打开文件，推荐用VS Code的Live Server插件，或者用Node.js的http-server工具搭建本地HTTP服务，通过http://localhost:端口号的方式访问页面，这样就能正常设置和读取Cookie了。

完整可运行代码 #

<!DOCTYPE html>
<html>
  <script>
    document.cookie = "name=oeschger; SameSite=Lax";
    document.cookie = "favorite_food=tripe; SameSite=Lax";

    function showCookies() {
      const output = document.getElementById("cookies");
      output.textContent = `> ${document.cookie}`;
    }

    function clearOutputCookies() {
      const output = document.getElementById("cookies");
      output.textContent = "";
    }
  </script>
  <body style="background-color: gray;">
    <button onclick="showCookies()">显示Cookie</button>
    <button onclick="clearOutputCookies()">清空</button>
    <br>
    <code style="color:burlywood" id="cookies"></code>
  </body>
</html>

补充说明 #

等后续部署到线上HTTPS环境时，再把Secure和SameSite=None属性加回去，这些属性是线上环境的安全规范要求。

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