如何为活动类使用本地存储

How to use local storage for active class?

本文关键字：存储 活动      更新时间：2023-09-26

如何使用本地存储来保存所选菜单项的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>

使用本地存储我尝试-

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

现在这对我没有帮助。

如何在本地存储中存储活动类？刷新页面时，我丢失了这个活动类。这个问题被问了很多次，但我没有找到任何简单的方法。

您似乎想记住哪个元素（上次，在刷新之前）具有"活动"类。

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

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

您必须编写代码才能将活动类持久存在本地存储中，并从本地存储中检索活动类。

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

如果您使用KnockoutJShttp://knockoutjs.com/然后您可以将viewModel的一部分持久化到本地存储中。这个问题讨论了这一点。

如何使用离线存储和Knockout.js实现MVVM？

希望能有所帮助。

$(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>
相关文章：