为暗模式/亮模式 JS 保存 cookie - 问题答案

【问题标题】：Saving a cookie for darkmode/lightmode JS - Issues为暗模式/亮模式 JS 保存 cookie - 问题
【发布时间】：2022-01-10 14:53:22
【问题描述】：

我正在尝试在主体加载时加载 cookie，然后检查它的值。如果 darkmode = true，那么它应该显示 css/cssmain.css。如果为 false，则应显示 css/csslight.css。 cookie 有效：如果我使用按钮从暗切换到亮，它会将暗模式从真（暗）更改为亮（假），反之亦然。它甚至在我刷新页面时仍然存在，但 css 切换到其默认文件。

基本上，我无法弄清楚如何让 darkMode 进入我的 javascript 中的 if 语句。我尝试使用 onload="getCookie(darkMode)" 尝试将 cookie darkMode 的值（真或假）放入脚本中。似乎只是没有运行脚本，因为即使我添加了警报，我使用按钮时也不会弹出警报。

HTML：

<head>
    <title>Freshwater Fish</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/cssmain.css">
    <link rel="stylesheet" type="text/css" href="css/desktopview.css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <link rel="stylesheet" type="text/css" href="css/slides.css">
    <link id='css_theme' rel='stylesheet' type='text/css' href='css/csslight.css'>
    <script src="js/fullstackfrog.js"></script>
</head>
<body onload="getCookie(darkMode)">

<button  class="lightmodeButton" onclick="document.getElementById('css_theme').setAttribute('href', document.getElementById('theme').value, document.cookie = 'darkMode=true'); if (document.getElementById('theme').value == 'css/cssmain.css'){  document.getElementById('theme').value = 'css/csslight.css'; document.cookie = 'darkMode=true';} else{ document.getElementById('theme').value = 'css/cssmain.css'; document.cookie = 'darkMode=false';}">Light/Dark</button>
<input type="hidden" id="theme" value="css/cssmain.css">

</body>
</html>

JS (fullstackfrog.js)：

function getCookie(name) {
  if (name) {
    document.getElementById('theme').value = 'css/cssmain.css';
  }
  else {
    document.getElementById('theme').value = 'css/csslight.css';
  }
}

【问题讨论】：

标签： javascript cookies darkmode lightmode

【解决方案1】：

你知道 cookie 是如何工作的吗？ document.cookie 将保持不变。您需要编写一些东西来获取 cookie 并解析来自document.cookie 的值。尝试阅读https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie 并使用示例。

【讨论】：

cookie 不一样。每次单击按钮时它都会改变。
我的意思是当您刷新或更改站点时，字符串document.cookie 将保持不变（不会还原）。