保存.addClass與jQuery的cookie或本地存儲

我想我每次保存樣式表使按鈕記得保存.addClass與jQuery的cookie或本地存儲

用戶可以打開/關閉該選項保存.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保存。主動類？我也將使用本地存儲所有這一切，但我不知道如何甚至開始的代碼片段我上面

來源

2014-11-21 user2513846

您將無法可靠地做到這一點。您應該使用服務器和數據庫設置。如果有人清除他們的cookies會怎麼樣？ – stackErr 2014-11-24 14:31:21

這對我的目的很好。如果cookies清除，他們再次切換開關..我想保持這個簡單。 – user2513846 2014-11-24 14:32:45

好吧，那麼你應該保持簡單，當按鈕處於關閉狀態時刪除cookie。當它被選中時創建一個cookie。並在頁面加載檢查cookie並設置類。 – stackErr 2014-11-24 14:36:30

這裏是一個辦法使用localStorage的：

鑑於這種標記（我使用的輸入類型=「電臺」在這個例子中）：

<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存儲到localstorage。另外將點擊選項的ID存儲到localstorage。然後在隨後的頁面加載使用的項目在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; 
    }); 
});

這裏是一個DEMO

在演示中，嘗試檢查上然後關閉，然後再次運行RUN。您會看到後續運行記得檢查了哪個項目並適當地設置了href。

來源

2014-11-24 16:18:34 ezanker

太棒了！很高興我遇到了你的另一篇文章！ :-) – user2513846 2014-11-24 22:08:10

這裏實現的是一個簡單的方法來做到這一點：

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

      } 
     }); 
    });

來源

2014-11-24 14:56:18 stackErr

保存.addClass與jQuery的cookie或本地存儲

回答

相關問題