javascript - 将 css 文件的选择保存到 LocalStorage，当页面刷新或重新打开时记住这个选择

Question

我已经尝试了无数的事情，我的头脑已经 NumPy 了，试图从其他问题和教程中找到解决方案，请问我能否对此有一些新的看法？基本上，我有一个在两个 css 文件之间切换的按钮(用于暗模式)，由于与 IE11 不兼容，我不使用 CSS 变量。

它需要记住选择，当页面加载时，它应该根据记住的内容加载。

这是我的javascript:

var defaultSS = './css/custom.css',
    altSS = './css/custom-dark.css',
    hrefAttr;

$('#css_toggle').click(function () {

  $('link').each(function(){
    hrefAttr = $(this).attr('href');
    if (hrefAttr.indexOf(defaultSS) >= 0) {
      $(this).attr('href', altSS);

      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));

    } else if (hrefAttr.indexOf(altSS) >= 0) {
      $(this).attr('href', defaultSS);

      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      document.cookie = $(this).attr('href');

    }
  });

});

和按钮:

<button class="themetoggle-button" id="css_toggle">Theme Toggle</button>

非常感谢任何帮助!!

Answer 1

使用 localStorage.setItem(name, value) 为暗模式设置标志，然后在使用 localStorage 加载页面后检查此标志是否为 true .getItem(名称)

如果为真，我们只需运行在点击函数中找到的相同代码

let defaultSS = './css/custom.css';
let altSS = './css/custom-dark.css';

$(window).on('load', () => {
  if (localStorage.getItem('dark-mode') === 'true') {
    $('link').each(function() {
      let href = $(this).attr('href');

      if (href.includes(defaultSS)) {
        $(this).attr('href', altSS);
      }
    })
  }
});

$('#css_toggle').click(function() {
  $('link').each(function() {
    let href = $(this).attr('href');

    if (href.includes(defaultSS)) {
      // Dark mode
      $(this).attr('href', altSS);
      localStorage.setItem('dark-mode', 'true');

      console.log('Was:', href);
      console.log('Now:', $(this).attr('href'));

    } else if (href.includes(altSS)) {
      // Light mode
      $(this).attr('href', defaultSS);
      localStorage.setItem('dark-mode', 'false');

      console.log('Was:', href);
      console.log('Now:', $(this).attr('href'));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="themetoggle-button" id="css_toggle">Theme Toggle</button>
<link rel="stylesheet" type="text/css" href="./css/custom.css">

---