客户端 cookie 在简单的 HTML/vanilla JS 页面中显示为空白字符串答案

【问题标题】：Client-side cookies turning up as blank string in simple HTML/vanilla JS page客户端 cookie 在简单的 HTML/vanilla JS 页面中显示为空白字符串
【发布时间】：2021-01-20 05:09:55
【问题描述】：

我正在尝试使用 cookie 进行一些练习。我试图通过创建一个非常简单的页面来练习这一点，用户可以在其中选择浅色或深色模式。当他们点击按钮时，我将他们的选择保存在 cookie 中（我知道 localStorage 也可以，但我想尝试使用 cookie）。

我对堆栈溢出进行了一些搜索，大多数人的问题是针对涉及服务器端问题的 cookie 的更复杂情况。尽管一些答案提到了将 cookie 保存在 localhost 上的问题。我只是在浏览器中打开我的 html 页面：file:///Users/wl/projects/cookies/index.html。 cookie 不会设置在像这个这样的本地文件上吗？

有没有办法让我在本地练习在客户端使用 cookie？

index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body class="container">
    <script src="main.js"></script>
    <div class="selectTheme">
      <h1>Pick a theme:</h1>
      <button type="button" id="lightMode" class="btn btn-light">Light Mode</button>
      <button type="button" id="darkMode" class="btn btn-danger dark">Dark Mode</button>
    </div>

  </body>
</html>

main.js（所有的 console.logs 都是空白的，但我认为它们应该返回我刚刚设置的 cookie 字符串）


document.addEventListener("DOMContentLoaded", ()=>{
  document.querySelector("#lightMode").addEventListener("click", ()=>{
    document.cookie="theme=light; maxAge=500000000"
    console.log(document.cookie)
  })
  document.querySelector("#darkMode").addEventListener("click", ()=>{
    document.cookie="theme=dark; maxAge=500000000"
    console.log(document.cookie)
  })
  
})

console.log(document.cookie)

【问题讨论】：

大多数浏览器没有为文件协议设置cookies。运行本地服务器。
为什么服务器对 cookie 如此重要？由于 cookie 是保存到用户计算机的数据，我觉得它应该适用于文件协议。我了解在大多数情况下，它们用于识别/验证用户，并且这些用例需要来回传递 cookie。但我也可以看到一个在本地保存用户首选项而不将其保存在服务器上的用例。我错过了一些关于 cookie 的内容吗？
因为文件协议的安全性与 http 不同。如果你在 15 年前就开始开发，情况就不一样了。运行本地服务器。这与保存到本地文件完全相同。每个 Web 开发人员都运行一个服务器.... localhost.... IDES 也有插件。
嗯，有道理。我刚刚启动了一个本地服务器，它现在按预期工作！我只是担心我误解了饼干的工作原理。感谢您的帮助。
@user12457151 不要忘记将此问题标记为已回答 :)

标签： javascript html cookies

【解决方案1】：

@epascarello 在 cmets 中帮助我的答案是运行本地服务器。出于安全原因，Cookie 不能用于文件协议。我使用 npm http-server 超级轻松地做到了。

【讨论】：