提问者:小点点

防止CSS刷新页面重新加载


我有一个带有两个CSS文件的html页面-一个用于浅色主题,一个用于深色主题。当我单击相应的按钮时,主题将更改为light. css或暗.css。

但是,每当我刷新页面、重新加载页面、返回等时,它都会变回默认的css(即light. css文件)。

当我单击按钮并刷新页面时,有什么方法可以让它停留在黑暗. css主题上吗?

谢谢。


共2个答案

匿名用户

您可以使用cookie、localStorage或session sionStorage来保留默认主题和选择的主题。因此,当您的页面加载时,您必须从cookie/localStorage/session sionStorage中读取该信息并应用所选主题。

例如页面加载时

let theme = localStorage.getElement('theme');
if(!theme){
theme = 'light';
localStorage.setElement('theme', 'light');
}
// and you use theme variable to load the light theme

例如当用户改变主题时

localStorage.setElement('theme', 'dark');
theme = 'dark';

匿名用户

如果不想使用后端方法替换style. css文件,可以尝试使用本地存储,如下所示:

如果不想使用后端方法替换style. css文件,可以尝试使用本地存储,如下所示:

$(function(){

  setSiteTheme(getSiteTheme());
  
  function setSiteTheme(themeName) {
    //Uncomment this in your app: window.localStorage.setItem('themeName', themeName);
    $('link[data-theme]').attr('href', themeName);
  }
  
  function getSiteTheme() {
    //Uncomment this in your app: return window.localStorage.getItem('themeName') || 'light.css';
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="/css/styles.css?version=5a6992221f52c" data-theme>