为暗模式/亮模式 JS 保存 cookie - 问题
Posted
技术标签:
【中文标题】为暗模式/亮模式 JS 保存 cookie - 问题【英文标题】：Saving a cookie for darkmode/lightmode JS - Issues 【发布时间】：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';
【问题讨论】：
【参考方案1】：你知道 cookie 是如何工作的吗？ document.cookie 将保持不变。您需要编写一些东西来获取 cookie 并解析来自document.cookie 的值。尝试阅读https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie 并使用示例。
【讨论】：
cookie 不一样。每次单击按钮时它都会改变。 我的意思是当您刷新或更改站点时，字符串document.cookie 将保持不变（不会还原）。以上是关于为暗模式/亮模式 JS 保存 cookie - 问题的主要内容，如果未能解决你的问题，请参考以下文章