javascript - 使用 cookie 切换主体类别

Question

我一直在绞尽脑汁寻找一个可行的解决方案。 目标是为视力不佳的人创建一个文本大小切换器。 我创建了三个带有小、中、大类的 span 元素。

我有一段代码几乎可以完成工作，但它需要 cookie 部分。

$(function() {
    $(".font-toggle span").click(function() {
        var size = $(this).attr('class');
        $("body").attr("id", size);
        return false;
    });    
});

如何使用 cookie 保存我的选择并在页面刷新后添加它？ 已经阅读了许多有关设置 cookie 的 stackoverflow 帖子，但所有这些帖子都只有一个切换功能。这里我有三个。

JSFIDDLE HERE

非常感谢!

Answer 1

$(document).ready(function(){
    $(".font-toggle span").click(function() {
        var size = $(this).attr('class');
        $("body").attr("id", size);
        if($.cookie('mycookie') == 'valueOfCookie'){
           $.cookie('mycookie', '');
        }
        else{
          $.cookie('mycookie', 'valueOfCookie');
        }
        
        return false;
    }); 
    if($.cookie('mycookie') == 'valueOfCookie'){
       $("body").attr("id", 'big-font');
    }
    else{
      $("body").removeAttr("id");
    }
});

#big-font{
  font-size: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>


<div class="font-toggle">
  <span class="big-font">
   Button
  </span>
</div>
<div>
  Text To Show
</div>