javascript - 在浏览器上存储一个 css 类

Question

我的元素可以选择通过单击链接来更改网站主题:

<ul>
  <li class="=contact"><a href="#">Contact</a></li>
  <li class="facebook"><a href="#">Facebook</a></li>
  <li class="twitter"><a href="#">Twitter</a></li>
  <li class="rss"><a href="#">Feed Rss</a></li>
  <li class="change-theme"><a href="#">Change Theme</a></li>
</ul>

当点击 <li class="change-theme"> 内的链接时它触发脚本:

$('.change-theme').click(function () {
  $('body').toggleClass('theme-dark');
});

它是添加类 theme-dark , 改变网站主题。但是当用户刷新页面时，默认主题又回来了。 有一种方法可以存储所选主题并在浏览器更新时使用它吗？

Answer 1

Localstorage 将为您提供存储没有过期日期的数据的可能性:

$('.change-theme').click(function () {
    $('body').toggleClass('theme-dark');
    if($('body').hasClass('theme-dark')){
        localStorage.setItem('theme', 'theme-dark');
    }
});

$(document).ready(function(){
    var theme = localStorage.getItem('theme');  
    if(theme !== ''){      
        $('body').addClass(theme);
    }
});

而 sessionStorage 将只存储一个 session 的数据，直到浏览器关闭(用法与 localStorage 相同)。

所有主要浏览器都支持此功能，Internet Explorer 从版本 8 开始支持此功能。

注意:您只能在 Webstorage 中存储字符串。

如果您想改用 cookie，您可以尝试:

document.cookie="theme=theme-dark"; //setter

和

var x = document.cookie; //getter

引用

webStorage

cookies