HTML5 LocalStorage - simple issue with jQuery

Question

I have the following code.

When I select a link, it goes from blue to red - great!
When I refresh the page, the clicked link will remain red - great!
When I click the red link, it returns to blue - great!
However , when I refresh the page that blue link goes red - not great!

I want it to remain blue when refreshed. Can someone help me out with this?

<!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>

Answer 1

it should be $('.filter-option a') , not $('.filters a') .
localStorage setting true and false should change their places ( true when it was false and vice versa).
if (checked) actually will work even for false value, because it turns out that checked is String , not Boolean . So it should be if (checked == 'true')
I also simplified some places in code.

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');
        }
    });
});

HTML5 LocalStorage - simple issue with jQuery

Question

1 answers

solution1
2 ACCPTED 2014-09-30 10:13:56

HTML5 LocalStorage - simple issue with jQuery

Question

1 answers

solution1 2 ACCPTED 2014-09-30 10:13:56

solution1
2 ACCPTED 2014-09-30 10:13:56