时间戳

首页 > 解决方案 > 将暗模式功能的结果保存为 cookie

javascript - 将暗模式功能的结果保存为 cookie

问题描述

我有一切工作在明/暗模式之间切换，我似乎无法弄清楚如何获取 js 函数的结果以在页面和重新加载之间另存为 cookie。我到处寻找，只是找不到合适的表达方式。我似乎总是保存了 cookie，或者函数在没有 cookie 的情况下执行。只是不能让两者都工作。这是我到目前为止所拥有的。HTML：

        <button class="dark-mode" id="theme" onclick="togTheme()">Dark Mode</button>

CSS：

:root {
  --navHeight: 70px;
  --darkHue: #B0BEC5;
  --darkShade: #37474F;
  --lightShade: #455A64;
  --white: #FFFFFF;
  --hue: #ECEFF1;
  --shade: #263238;
  --black: #222222;
  --gray: #eee;
  --blue: #0071BC
}

.light-theme {
  --themeDropDownBg: var(--goldCrayola);
  --themeIconBorderColor: var(--sage);
  --navBg: var(--hue);
  --navLinkHoverBg: var(--darkHue);
  --mainBg: var(--white);
  --fontColor: var(--black);
}

.dark-theme {
  --themeDropDownBg: var(--msuGreen);
  --themeIconBorderColor: var(--richBlackForeground);
  --navBg: var(--lightShade);
  --navLinkHoverBg: var(--darkShade);
  --mainBg: var(--shade);
  --fontColor: var(--hue);
}



* {
  color: var(--fontColor);
  font-family: 'Risque';
  transition: background 500ms ease,
    padding 500ms linear;
}

body {
  margin: 0px;
  padding: 0px;
  background: var(--mainBg);
}

nav {
  background: var(--navBg);
  color: var(--fontColor);
}

nav a:hover {
  background-color: var(--navLinkHoverBg);
  color: var(--blue);
}

nav button {
  background: var(--navBg);
  color: var(--fontColor);
}

nav button:hover {
  background-color: var(--navLinkHoverBg);
  color: var(--blue);
}

Javascript：

function togTheme() {
  var element = document.body;
  element.classList.toggle("dark-theme");
  var x = document.getElementById("theme");
  if (x.innerHTML === "Dark Mode") {
    x.innerHTML = "Light Mode";
  } else {
    x.innerHTML = "Dark Mode";
  }
}

任何帮助将不胜感激。

标签： javascripthtmlcsscookies

解决方案

const setCookie = (name, value, exdays) => {
    const d = new Date(); // Gets current date
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); //calculates the date when it has to expire
    const expires = "expires="+ d.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/"; // sets the cookie
}

使用此功能，您可以轻松添加 cookie。给出模式的类型作为值，cookie 必须过期的天数和 cookie 的名称。

为了在主题之间切换，我会亲自使用 localstorage 或将模式保存在您的后端数据库中。

推荐阅读