javascript - 使用上一页的CSS并应用于当前页面

Question

我想在我的网站上实现夜间模式，我已经创建了那个 css。我遇到的问题是，当我移动到另一个页面时，它使用通用的 css 文件。

我使用一些 javascript 切换到夜间模式 css。如何确保夜间模式 css 在激活时应用于所有页面，以及当我切换到通用 css 时它应用于所有页面？

Answer 1

您可以为此使用 cookie 或 localStorage 变量。在此示例中，我使用了一个名为 nightMode 的 localStorage 变量，并将其设置为“ON”或“OFF”。根据变量的值加载正确的 CSS 文件。

请注意，localStorage 变量是保存在浏览器中的没有过期日期的变量，因此即使窗口关闭并重新打开，该变量仍会保存在浏览器中。

//on page load, check localStorage value
var stylesheet = document.createElement('link');
stylesheet.rel = "stylesheet";
  

if(localStorage.getItem('nightMode') == "ON") {
  //add link to night mode CSS
  stylesheet.href = "path/to/nightmode.css";
  document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
else {
  //add link to night mode CSS
  link.href = "path/to/normalmode.css";
  document.getElementsByTagName('head')[0].appendChild(stylesheet);
}

//set the nightmode at some point by calling this function
function toggleNightMode() {
  var currentMode = localStorage.getItem('nightMode');
  if(!currentMode) {
    //the vaeriable is not set, set it to default value
    localStorage.setItem("nightMode", "OFF");
  }
  else if(currentMode == "ON") {
    //current mode is ON, now set it to OFF
    localStorage.setItem("nightMode", "OFF");
  }
  else {
    //set to ON
    localStorage.setItem("nightMode", "ON");
  }
}