Question

我想使用Javascript使用执行函数的按钮在HTML中添加一个类，然后使用另一个按钮将其删除。但我想保存该类，直到按下另一个按钮，使用LocalStorage。没有LocalStorage我就可以做到这一点

$$('body').addClass('Class here');

但是如何使用LocalStorage？

Answer 1

使用Storage.setItem进行保存，然后Storage.getItem进行检索，如下所示：

var className = "theclass";

// Put the class name into storage
localStorage.setItem('className', className);

// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');

$('body').addClass(retrievedClassName);

Answer 2

这是一个使用jquery的工作代码：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body class="">
        <div class="form-group">
            <button class="button">your button</button>
        </div>
        <script>
            var className = "theclass";

            jQuery('.button').on( 'click', function(){
                localStorage.setItem('className', className);
                jQuery('body').addClass(className);
            });

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            jQuery('body').addClass(retrievedClassName);
        </script>
    </body>
</html>

这里没有：

<html>
    <head></head>
    <body id="mybigbody" class="">
        <div class="form-group">
            <button id="button">your button</button>
        </div>
        <script>
            var className = "theclass";
            var body = document.getElementById("mybigbody");

            document.getElementById('button').onclick = function(e) {
                localStorage.setItem('className', className);
                body.setAttribute("class", className);
                e.stopPropagation();
            }

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            if(retrievedClassName)
                body.setAttribute("class", retrievedClassName);
        </script>
    </body>
</html>

使用js函数在html中添加/删除类

2 个答案: