Question

如何将选定菜单项的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>

切换活动类 -

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

使用localstorage我试过 -

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

现在这对我没有帮助。

如何将活动类存储在本地存储中？刷新页面时，我会丢失此活动类。这个问题被多次询问，但我没有采用任何简单的方法。

Answer 1

好像你想要记住哪个元素（最后一次，在刷新之前）有'活跃'类。

因此，如果你有一个已知数量的列表项，你可以只跟踪索引，然后存储它。

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

Answer 2

您必须编写代码以将活动类保留在本地存储中，并从本地存储中检索活动类。

localStorage.setItem('ActiveClass', ClassName);

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

如果您使用的是KnockoutJS http://knockoutjs.com/，则可以将部分viewModel保留在本地存储中。这个问题讨论了这一点。

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

希望有所帮助。

Answer 3

$(this).addClass('active')将返回$(this)，点击的li的jquery版本会在每次重新加载时更改。

您需要存储的是绝对引用，例如点击的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>

如何使用本地存储进行活动类？

3 个答案: