保存.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或本地存储

回答

相关问题