javascript - 单击 anchor 时如何设置/存储 cookie

Question

我正在尝试使用 Cookie，以便即使在浏览器关闭/重新打开时，也会针对单击的 anchor 标记应用默认样式或特定样式。因此，如果用户单击第二个链接，关闭或刷新浏览器并重新打开，那么该样式应该仍然处于事件状态，如果这是他们的第一次，则应该应用默认设置。这有点超出我的地盘了。

这是 HTML:

<a id="default" href="#/">Default Style</a>
<a id="style2"  href="#/">Style 2</a>
<a id="style3"  href="#/">Style 3</a>

<ol>
<li><span>Hello World</span></li>
</ol>

JQuery:(对 StackOverflow 的赞美)

<script type="text/javascript">
$('#default').on('click',function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('default');
});
$('#style2').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('#style3').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});
</script>

CSS:

<style type="text/css">
.default{
color: #333;
}

.style2{
color: #999;
}

.style3{
color: #800;
}
</style>

Answer 1

通过操作文档对象 (document.cookie) 的 cookie 属性获取和设置 Cookie。 Mozilla 开发人员网络有一篇很棒的文章讨论了这一点，并提供了获取和设置 cookie 的便捷方法。 https://developer.mozilla.org/en-US/docs/DOM/document.cookie

注意:jQuery 不附带任何与 cookie 相关的方法，但可以使用插件将语法糖 ($.cookie) 放在这些方法周围。

否则，您可以检查您的 cookie 并在就绪回调中以通常的方式处理该逻辑。

    $(body).ready(function(){
       if (document.cookie.match("cookie_name")) {
          // Handle logic here
       }
    });

至于根据 anchor 击设置 cookie，您可以使用 onclick 属性，或将 href 属性设置为“javascript:yourFunction();”，或使用 jQuery 的 click 方法。