Question

我试图在按钮点击的基础上在我的应用程序中实现多个主题支持，并在窗口加载时应用它。

这是我的jQuery -

<script type="text/javascript">

        $(function () {
            if (typeof (window.localStorage) != "undefined") {
                //set the value to the text fields
                $("ul#color-schemes li a").click(function () {
                    console.log($(this).attr('class'));
                    return localStorage.getItem($(this).attr('class'));
                });
                $(window).on('load', function () {
                    localStorage.setItem($('body'), $('body').addClass('darkgrey-scheme'));
                });
            }
        });
    </script>

我在这种情况下存储了类 - darkgray-scheme，然后尝试将其应用于正文上的窗口加载。但是这不适用于身体，并且在设置带存储的项目时也不会返回dark-gray类。

应如何做到这一点？

Answer 1

这是 Demo fiddle 。

第一部分：

$("ul#color-schemes li a").click(function () {
    console.log($(this).attr('class'));
    localStorage.setItem('class',$(this).attr('class'));  //set the class value
    $('body').removeAttr('class');
    $('body').addClass(localStorage.getItem('class'));
});

第二部分：

$('body').addClass(localStorage.getItem('class'));    //get the class value

在您的项目中，只需在文档准备中包含第I部分 - $(function () {}); 在文件准备好的$(window).on('load', function () {});或两者中第二部分。

所以你的最终功能就像：

$(function () {
    $("ul#color-schemes li a").click(function () {
        console.log($(this).attr('class'));
        localStorage.setItem('class',$(this).attr('class'));  //set the class value
        $('body').removeAttr('class');
        $('body').addClass(localStorage.getItem('class'));
    });

    $('body').addClass(localStorage.getItem('class'));    //get the class value
});

对于localStorage和其他webStorage使用，请检查此 Page 。

使用webstorage应用主题

1 个答案: