跨页面保存网站主题（例如暗模式）答案

【问题标题】：Save website theme (eg. dark mode) across pages跨页面保存网站主题（例如暗模式）
【发布时间】：2022-02-11 00:17:32
【问题描述】：

我目前正在构建一个音乐博客，它使用以下 JavaScript 代码来切换暗模式/亮模式按钮：

function swapStylesheet(sheet) {
    document.getElementById('swap').setAttribute('href', sheet);
}

我的问题是，每当刷新页面或访问新页面时，网站都会恢复到默认的 CSS 表，而不是记住选择的主题。我可以让我的网站通过 cookie 或 localstorage 或其他方式记住用户最后选择的主题吗？

请告诉我！太感谢了。 =]

【问题讨论】：

Localstorage 是一个很好的起点。用它来存储一个变量，比如isDarkMode:true/false

标签： javascript cookies local-storage themes darkmode

【解决方案1】：

简短的回答是肯定的。你可以通过 Cookies 或 Local Storage 保存，有很多方法可以实现，我只是给你 cookie 的参考，你可以在 W3School 上测试它

您现在提出的问题仅适用于页面之间，但如果您希望根据用户帐户保留它，那么答案是您需要将每个帐户的“主题”数据集中在数据库或服务器等某个地方缓存。

https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 30);
    }
  }
}

checkCookie();

【讨论】：