无法在开发者工具及document.cookie对象中查看创建的JavaScript Cookie

我是JavaScript新手，正在尝试创建Cookie，但出于某些原因我似乎无法将Cookie保存到document.cookie对象中。我的核心需求是让用户在文本框中输入内容，点击按钮后将输入内容保存到Cookie中，在JS中使用document.getElementById("elementID").value;获取用户输入的值。我尝试过手动创建Cookie，比如document.cookie = "name=samu";，但它同样没有显示。搜索相关需求后我找到了相关示例页面可以正常从文本框用户输入创建Cookie，我在该页面的开发者工具 > 应用 > Cookie下可以看到生成的Cookie，但我哪怕复制粘贴该页面的代码运行也没有效果。我还参考了W3School的Cookie设置和创建示例，同样无法正常运行。

HTML代码 #

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Stylesheet1.css">
    <script type="text/javascript" src="objectosPredef.js"></script>
    <title>Actividad 2</title>
</head>
<body onload="listaPropiedades()">
    <div id="listaPropiedades"></div>
    <input type="text" id="nombre" placeholder="entra tu nombre" />
    <button onclick="crearCookie();">点击</button>

</body>

</html>

JavaScript代码 #

function setCookie(nombre, valor, exp) {
    var d = new Date();
    d.setTime(d.getTime() + exp * 24 * 60 * 60 * 1000);
    var exp = "expires=" + d.toUTCString();
    document.cookie = nombre + "=" + valor + ";" + exp + ";path=/";
    alert(document.cookie);
}

function crearCookie() {
    var nombre = "nombre_usuario";
    var valor = document.getElementById("nombre").value;
    alert(valor);
    var exp = 500;
    setCookie(nombre, valor, exp);
    
}

我使用的开发工具是Microsoft Visual Studio Community 2019，提前感谢各位的帮助！

问题原因 #

你的代码本身没有逻辑错误，无法写入Cookie是因为你直接在本地以file://协议打开HTML文件导致的。主流浏览器出于安全策略限制，file://协议下的页面不支持Cookie的读写操作，你参考的示例页面运行在http/https协议下，所以可以正常操作Cookie。

解决方案 #

你可以任选以下任意一种方案解决该问题：

• 使用VS2019自带的IIS Express启动页面：右键你的HTML文件，选择「在浏览器中查看」，VS会自动启动本地HTTP服务，页面将以http://localhost:端口/xxx.html的形式加载，该环境下Cookie可正常读写。
• 使用其他本地HTTP服务工具启动页面：比如Node.js的http-server、Python内置的SimpleHTTPServer等，只要页面运行在http/https协议下即可。

验证：启动HTTP服务后打开页面输入内容点击按钮，弹出的alert弹窗会展示已写入的Cookie内容，也可以在开发者工具的「应用」面板中查看到对应的Cookie条目。

内容的提问来源于stack exchange，提问作者Samuel Van Bladel