使用 jQuery cookie 或本地存储保存 .addClass

save .addClass with jQuery cookie or local storage

本文关键字：存储 保存 addClass jQuery cookie 使用      更新时间：2023-09-26

每次保存样式表时，我都会尝试保存 .addClass，以便按钮记住

用户可以打开/关闭该选项。

我的简单html：

<div id="btn-switch" class="btn-group" data-toggle="buttons">
    <button class="btn btn-default" type="radio" name="options" id="option1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off">off</button>
    <button class="btn btn-default" type="radio" name="options" id="option2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off">on</button>
</div>

这是我的代码：

<script>
$(document).ready(function() {
    if ($.cookie("css")) {
        $("#bg").attr("href", $.cookie("css"));
    }
    $("#btn-switch button").click(function() {
        $("#bg").attr("href", $(this).attr('data-color'));
        $("#btn-switch .active").removeClass("active");
        $(this).addClass("active");
        $.cookie("css", $(this).attr('data-color'), {
            expires: 365,
            path: '/'
        });
        return false;
    });
});
</script>

如何使用同一个 cookie 来保存 .active 类？我也会使用本地存储来完成所有这些工作，但我什至不知道如何启动我上面实现的代码片段

以下是使用本地存储的一种方法：

给定此标记（我在此示例中使用input type="radio"）：

<div class="btn-group" data-toggle="buttons" id="btn-switch">
  <label class="btn btn-default">
    <input type="radio" id="option1" name="options" value="1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off"> off
  </label> 
  <label class="btn btn-default">
    <input type="radio" id="option2" name="options" value="2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off"> on
  </label> 
</div>
<br><br>
<a id="bg" href="{T_THEME_PATH}/normal.css">Background</a>

在脚本中，侦听单选按钮上的更改事件。这将针对检查的任何无线电触发。首先将 #bg href设置为单击的收音机的颜色数据属性（使用jQuery .data（））。然后将此 href 存储到本地存储。此外，将单击的选项的 ID 存储到本地存储。然后在后续页面加载中使用 localstorage 中的项目来设置正确的 href 并激活正确的单选按钮：

$(document).ready(function() {
    var csshref = localStorage["css"];
    if (csshref) {
        $("#bg").prop("href", csshref);
    }
    var activeid = localStorage["activeid"];
    if (activeid) {
        $("#" + activeid).prop("checked", true).closest("label").addClass("active");
    }
    $('#btn-switch [type="radio"]').on("change", function() {
        $("#bg").attr("href", $(this).data('color'));        
        localStorage.setItem('css', $(this).data('color'));        
        localStorage.setItem('activeid', $(this).prop('id'));        
        return false;
    });
});

这是一个演示

在演示中，尝试检查打开和关闭，然后再次点击运行。您将看到后续运行会记住检查的项目并正确设置 href。

这是一个简单的方法：

    $(document).ready(function () {
        //on page load check for cookie value and add active class
        if($.cookie("isButtonActive") == 1)
        {
            $("#btn-switch button").addClass("active");
        }
        $("#btn-switch button").click(function() { 
           //your previous code here
           if($("#btn-swtich button").hasClass("active") == true)
           {
               //button was active, de-activate it and update cookie
               $.("#btn-switch button").removeClass("active");
               $.cookie("isButtonActive", "0");
           }
           else
           {
               //button is not active. add active class and update cookie.
               $.("#btn-switch button").addClass("active");
               $.cookie("isButtonActive", "1");
           }
        });
    });
相关文章：