Using LocalStorage in Javascript

Question

I have a side navigation bar:

<li class="side-nav-tab">
  <a href="/item"><i class="fa fa-dashboard fa-fw"></i> Items<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/client"><i class="fa fa-bar-chart-o fa-fw"></i> Clients<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/quote"><i class="fa fa-table fa-fw"></i> Quotes<span></span></a>
</li>

jQuery:

    $(document).ready(function(){
        $('.side-nav-tab').on('click', function(){
          var arrow = $(this).find('span').attr('class');

          if ((arrow == undefined) || (arrow == '')) {
            $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
            $(this).find('span').addClass('fa arrow');
          }

        })
    })

The code above works (adds the class 'fa arrow' to the span) but it's only temporary. The problem is that when you click $('.side-nav-tab'), it directs you to that route, does a page reload, and I lose the 'fa arrow' class I just added.

After doing some research, it appears I could use localStorage, but have been unsuccessful in trying:

var storage = localStore.getItem(arrow)

Any thoughts?

Thanks

please provide us with a fiddle with some working CSS as well . thanks — Sai
– Sai, Commented Apr 3, 2015 at 2:38
there's no console error because it is functional, it just reloads and the class gets removed. — user3007294
– user3007294, Commented Apr 3, 2015 at 2:41

Dave · Accepted Answer · 2015-04-03 02:51:46Z

1

Don't try to use localstorage for this. The proper, and simpler, way is to use preventDefault() to prevent the link from firing. Try this event handler:

$('.side-nav-tab').on('click', function(e){
  e.preventDefault();
  var arrow = $(this).find('span').attr('class');
  if ((arrow == undefined) || (arrow == '')) {
        $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
        $(this).find('span').addClass('fa arrow');
   }
 });

answered Apr 3, 2015 at 2:51

Dave

11k3 gold badges45 silver badges54 bronze badges

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

1 Comment

user3007294 Over a year ago

thanks Dave! this ended up working well. appreciate the help!

Collectives™ on Stack Overflow

Using LocalStorage in Javascript

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