刷新页面后如何阻止 CSS 样式表重置为默认值？答案

【问题标题】：How do I stop CSS stylesheet from resetting to default after refreshing the page?刷新页面后如何阻止 CSS 样式表重置为默认值？
【发布时间】：2020-01-24 06:25:16
【问题描述】：

我有这段代码：

$(document).ready(function() {
    $(".lightDark").hide();
    $("#changeTheme").click(function() {

        $(".lightDark").toggle("slow");
    });

    // Switch theme

    $('#lightTheme').click(function() {
         $('link[href="darkMode.css"]').attr('href','lightMode.css');
    });

    $('#darkTheme').click(function() {
        $('link[href="lightMode.css"]').attr('href','darkMode.css');
    });
});

body {
background-color: black;
}

.changeThemeButtons {
  float: right;
  margin-top: 50px;
  margin-right: 50px;
  border:2px solid white;
  border:none;
  color:white;
}

.changeThemeButtons td {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.6em;
  text-transform: uppercase;
  color:white;
  text-align: center;
}

.changeThemeButtons th {
  background-color: #733FFF;
  border-radius: 100px;
  height:200px;
  width:200px;
}

#changeTheme {
  cursor: pointer;
}

#changeTheme i {
  color:#f00;
}

#darkTheme {
  color:black;
  margin-right: 50px;
}

#lightTheme {
  color:white;
}

<script src="https://kit.fontawesome.com/c22b2f5999.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="darkMode" href="darkMode.css">


<div class="block two">
         <nav>
            <a href="#about">About me</a>
            <a href="#myWork">My Work</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
         </nav>
         
         
         <table class="changeThemeButtons" align="right">
            <tr>
               <td><a id="changeTheme">Change Theme &nbsp;<i class="fas fa-caret-down"></i></a></td>
            </tr>
            <tr>
               <th class="lightDark">
               	  <a href="#" id="darkTheme"><i class="fas fa-circle fa-3x"></i></a> 
                  <a href="#" id="lightTheme"><i class="fas fa-circle fa-3x"></i></a>
               </th>
            </tr>
         </table>

一切正常，直到您在 lightMode.css 上，假设您刷新页面，然后它会重置为 darkMode.css。我试图从 HTML（使用 JQuery）中删除默认的 darkMode.css，但它似乎不起作用。我需要它保持 lightMode（如果选择），直到您再次单击以手动更改为 darkMode。

【问题讨论】：

考虑使用会话变量或 cookie 来存储 css 状态。
预计每次刷新都会将所有内容“刷新”到起点，因为所有脚本和代码都会再次加载。当用户选择时，您可能需要将用户选择保存在 localStorage 中，然后在页面启动时从 localStorage 中读取它
您可以在本地存储中设置一个标志，然后在页面加载时检查该标志以仅启用浅色或深色模式
这会有所帮助：stackoverflow.com/questions/23699556/…
localStorage.setItem('myCat', 'Tom'); var cat = localStorage.getItem('myCat');像会话一样工作

标签： javascript jquery html css stylesheet

【解决方案1】：

只需将您的主题 css 放入 css 文件并将其传递给函数，在页面加载 if (localStorage.getItem("theme") != "") 检查主题是否已设置.. 这里有一个例子：

    if (localStorage.getItem("theme") != "") {
        loadcssfile(localStorage.getItem("theme"));
      }

      function loadcssfile(filename) {
        if (filename != "") {
          localStorage.setItem("theme", filename);
        }
        
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);

        if (typeof fileref != "undefined")
          document.getElementsByTagName("head")[0].appendChild(fileref);
      }

  <div onclick="loadcssfile('css/pink.css')" id="pink">
      Pink
    </div>
    <div
      onclick="loadcssfile('css/blue.css')" id="blue">
      Blue
    </div>

【讨论】：

【解决方案2】：

您需要为首次访问者提供默认主题。
您需要将用户选择存储在某处（cookie、本地存储或数据库等）
在文档准备就绪时，从您的存储中读取用户的首选主题并应用相应的 css 文件。如果没有偏好，只需保留默认主题即可。

【讨论】：

谢谢你，@Ankit。我希望我不需要做那种事情，因为我不知道该怎么做。你能以任何方式进一步指导我吗？所以基本上我的问题是，我如何将用户的选择存储在本地存储中？
我假设您没有数据库，因此您可以将用户的选择保存在 cookie 中，然后在页面加载时读取它。这是一个讨论处理 cookie 的链接。 stackoverflow.com/questions/14573223/…

【解决方案3】：

您可以执行以下操作将值存储在本地存储中：

$(document).ready(function() {

  const theme = localStorage.getItem('mode');
  console.log(theme);
  if(theme){
    $('link[id="darkMode"]').attr('href',theme);
 }
    $("#changeTheme").click(function() {

        $(".lightDark").toggle("slow");
    });

    // Switch theme

    $('#lightTheme').click(function() {     
         $('link[id="darkMode"]').attr('href','lightMode.css');
      localStorage.setItem('mode','lightMode.css');
    });

    $('#darkTheme').click(function() {
        $('link[id="darkMode"]').attr('href','darkMode.css');
        localStorage.setItem('mode','darkMode.css');
    });
});

【讨论】：