Как использовать локальное хранилище для активного класса?

Question

Как использовать локальное хранилище для активного класса?

0

Как сохранить cookie, сохраненный в выбранном пункте меню, с помощью локального хранилища?

Меню -

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

Переключение активных class-

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

Использование localstorage я 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>

Теперь это мне не помогло.

Как сохранить активный класс в локальном хранилище? Я теряю этот активный класс, когда страница обновляется. Этот вопрос задают много раз, но у меня не было простого способа сделать это.

Manoz 15 дек. 2013, в 16:35

Источник

0

Это недопустимый синтаксис: var menuactive= localStorage.setItem('mySelectValue', $(this).addClass('active');
A. Wolff 15 дек. 2013, в 15:10

Теги:

javascript

jquery

local-storage

3 ответа

Ещё вопросы

Это недопустимый синтаксис: var menuactive= localStorage.setItem('mySelectValue', $(this).addClass('active');

mattsahr · Answer 1 · 2013-12-15T12-30-00.000Z

Похоже, вы хотите вспомнить, какой элемент (последний раз, до обновления) был активным классом.

Поэтому, если у вас есть известное количество элементов списка, вы можете просто отслеживать индекс и хранить его.

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

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

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

И тогда у вас может быть функция onload, что-то вроде этого...

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

это isNaN не isNan, вы получите isNan не определено

Captain John · Answer 2 · 2013-12-15T12-22-00.000Z

Вам нужно будет написать код, чтобы сохранить активный класс в локальном хранилище и извлечь активный класс из локального хранилища.

localStorage.setItem('ActiveClass', ClassName);

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

Если вы использовали KnockoutJS http://knockoutjs.com/, то вы можете сохранить часть своего видаModel в локальном хранилище. Этот вопрос обсуждает это.

Как я могу реализовать MVVM с автономным хранилищем и Knockout.js?

Надеюсь, это поможет.

Samuel · Answer 3 · 2013-12-15T13-34-00.000Z

$(this).addClass('active') вернет $(this), jquery-версию щелчка li, которая изменяется при каждой перезагрузке.

Что вам нужно хранить это абсолютная точка отсчета, как индекс li, который щелкнул:

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