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>

I don't see any elements with class filters. Should it be .filter-option in JS? — Regent
– Regent, Commented Sep 30, 2014 at 9:58
Very good point. Instead of filter, what should I have here? — michaelmcgurk
– michaelmcgurk, Commented Sep 30, 2014 at 9:59
Which browser do you use? Your example is working for me on FF and Chrome on file://[...] uri — Benedikt
– Benedikt, Commented Sep 30, 2014 at 10:00
@Benedikt this code works incorrect for me in fiddle (browser Opera 24.0), so I have already been debugging it. — Regent
– Regent, Commented Sep 30, 2014 at 10:04

Regent · Accepted Answer · 2014-09-30 10:13:56Z

2

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

answered Sep 30, 2014 at 10:13

Regent

5,1743 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelmcgurk Over a year ago

Absolutely perfect, @Regent! Many thanks for both the code revisions & the explanations too - very much appreciated :-)

Collectives™ on Stack Overflow

HTML5 LocalStorage - simple issue with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related