HTML5 LocalStorage - jQuery的简单问题

当我选择一个链接，它从蓝色变为红色 - 太棒了！
当我刷新页面时，点击的链接将保持红色 - 太棒了！
当我点击红色链接时，它回到蓝色 - 太棒了！
但是，当我刷新蓝色链接变成红色的页面时 - 不好！

我希望它在刷新时保持蓝色。有人可以帮我解决这个问题吗？

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <title> - jsFiddle demo</title> 

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 

    <style type='text/css'> 
    a {color: blue} 
    .active {color:red} 
    </style> 

<script type='text/javascript'> 
$(document).ready(function(){ 

    $('.filters a').on('click', function() { 
     var data_filter = $(this).closest("a").data('filter'); 
     if($(this).hasClass("active")) { 
      $(this).removeClass("active"); 
      localStorage.setItem(data_filter,true); 
     } 
     else { 
      $(this).addClass("active"); 
      localStorage.setItem(data_filter,false); 
     } 
    }); 

    $('.filters a').each(function(){ 
     var data_filter = $(this).closest("a").data('filter'); 
     var checked = localStorage.getItem(data_filter); 
     if(checked){ 
      $(this).addClass('active'); 
     } else { 
      $(this).removeClass('active'); 
     } 
    }); 

}); 
</script> 


</head> 
<body> 
    <div class="filters slide-down"> 

      <ul class="groups inline naked right"> 

       <li class="group"> 
        <h3 class="text-right filter-heading trigger" data-target="#colours_filters">Colour</h3> 
        <ul class="naked" id="colours_filters"> 
         <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li> 
         <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li> 
         <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-brown">Brown</a></li> 
         <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-gray">Gray</a></li> 
        </ul>        
       </li> 

       <li class="group"> 
        <h3 class="text-right filter-heading trigger" data-target="#theme_filters">Theme</h3> 
        <ul class="naked" id="theme_filters"> 
         <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-carefree">Carefree</a></li> 
         <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-decay">Decay</a></li> 
         <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-dramatic">Dramatic</a></li> 
         <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-family">Family</a></li> 
         <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-nautical">Nautical</a></li> 
        </ul> 

       </li> 

       </li> 

      </ul> 

</body> 

</html>

来源

2014-09-30 michaelmcgurk

我没有看到class'filters'的任何元素。它应该是JS中的'.filter-option'吗？ – Regent 2014-09-30 09:58:49

非常好的一点。我不应该使用“过滤器”，我应该在这里做什么？ – michaelmcgurk 2014-09-30 09:59:54

您使用哪个浏览器？您的示例正在为FF和Chrome上的文件工作：// [...] uri – Benedikt 2014-09-30 10:00:58

应该$('.filter-option a')，不$('.filters a')。
localStorage设置true和false应改变他们的位置（true当它是false，反之亦然）。
if (checked)实际上即使对于false值也可以工作，因为事实证明checked是String而不是Boolean。所以它应该是if (checked == 'true')
我也简化了代码中的一些地方。

Updated fiddle。

$(document).ready(function() 
{ 
    $('.filter-option a').on('click', function() 
    { 
     var data_filter = $(this).data('filter'); 
     $(this).toggleClass("active"); 
     localStorage.setItem(data_filter, $(this).hasClass("active")); 
    }); 

    $('.filter-option a').each(function() 
    { 
     var data_filter = $(this).data('filter'); 
     var checked = localStorage.getItem(data_filter); 
     if (checked == 'true') 
     { 
      $(this).addClass('active'); 
     } 
    }); 
});

来源

2014-09-30 10:13:56 Regent

绝对完美@Regent！非常感谢代码版本和解释 - 非常感谢:-) – michaelmcgurk 2014-09-30 10:16:02

@michaelmcgurk欢迎:) – Regent 2014-09-30 10:17:47

HTML5 LocalStorage - jQuery的简单问题

回答

相关问题