How to use local storage for active class?

Question

How do I keep cookie stored of selected menu item with local storage?

Menu-

<ul class="nav nav-pills">
    <li class="active"><a href="#" >Customers</a></li>
    <li><a href="#" >Statics</a></li>
    <li><a href="#" >payroll</a></li>
</ul>

Toggling active class-

<script type="text/javascript">
    $(function () {
        $('.nav-pills li').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

Using localstorage I tried-

<script type="text/javascript">
    $(function () {
        $('.nav-pills li').click(function () {
            $(this).siblings().removeClass('active');
                var menuactive = localStorage.setItem('mySelectValue', $(this).addClass('active');
                $(this).addClass(localStorage.getItem('mySelectValue'));
            });
        });
</script>

Now this didn't help me.

How do I store active class in local storage? I lose this active class when page is refreshed. This question is asked many times but I didn't get any simple way of doing it.

This is not valid syntax: `var menuactive= localStorage.setItem('mySelectValue', $(this).addClass('active');` — A. Wolff, Dec 15 '13 at 15:10

mattsahr · Answer 1 · 2017-04-21T13:15:32.320

It seems like you want to remember which element had (last time, before refresh) the 'active' class.

So if you've got a known number of list items, you could just keep track of the index, and store that.

$(function () {
    $('.nav-pills li').click(function () {

        $(this).siblings().removeClass('active');
        $(this).addClass('active');

        var activeIndex = $(this).index();
        localStorage.setItem('mySelectValue', activeIndex);
    });

And then you can have an onload function, something like this...

    var activeIndex = localStorage.getItem('mySelectValue');
    if (isNaN(activeIndex)) {
        console.log('nothing stored');
    } else {
        $('.nav-pills li:nth-child('+activeIndex+')').addClass('active');
    }

it is isNaN not isNan , you will get isNan is not defined – narahari_arjun Apr 19 '17 at 09:31 — narahari_arjun, Apr 19 '17 at 09:31

score 1 · Answer 2 · edited May 23 '17 at 11:54

You will have to write code to persist the active class in local storage and retrieve active class from local storage.

localStorage.setItem('ActiveClass', ClassName);

var activeClass = localStorage.getItem('ActiveClass');
$(item).addClass(activeClass);

If you were using KnockoutJS http://knockoutjs.com/ then you can persist part of your viewModel in local storage. This question discusses this.

How can I implement MVVM with offline storage and Knockout.js?

Hope that helps.

score 0 · Answer 3 · answered Dec 15 '13 at 15:22

$(this).addClass('active') will return $(this), the jquery version of the li clicked, which changes at each reload.

What you need to store is an absolute reference, like the index of the li that is clicked:

<script type="text/javascript">
    $(function () {
        $('.nav-pills li').click(function () {
            $(this).siblings().addSelf().removeClass('active');
            localStorage.setItem('mySelectValue', $(this).index());
            $(this).addClass('active');
        });
    });
</script>

How to use local storage for active class?

3 Answers3

Linked