用jQuery cookie或本地存儲保存.addClass

Question

我試圖每次保存樣式表時都保存.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類？ 我還將所有這些都使用本地存儲，但是我什至不知道如何啟動我在上面實現的代碼段

Answer 1

這是一種使用本地存儲的方法：

給定此標記（在此示例中，我使用輸入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>

在腳本中，偵聽單選按鈕上的change事件。 將為選中的所有無線電觸發該信號。 首先將#bg href設置為單擊的收音機的顏色數據屬性（使用jQuery .data（） ）。 然后將此href存儲到localstorage。 另外，將單擊的選項的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。

Answer 2

這是一種簡單的方法：

    $(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");

           }
        });
    });