Question

我的菜单有这个HTML切换按钮：

<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">

如何保存切换状态以在页面加载时重新加载

我已经开始了：

$(document).ready(function() {
    $("#toggle_nav").toggle(function() {

    });
});

但我不确定用什么来保持状态

Answer 1

就像人们在赞扬中说的那样，你可以使用html 5网络存储。

您有两种类型：
- localStorage - 存储没有到期日期的数据
- sessionStorage - 存储一个会话的数据

如何设置：
localStorage.setItem("name", "value");

如何获得价值
localStorage.getItem("name");

所以现在你可以做一个简单的检查：

if (localStorage.getItem("toggle") === null) {
    //hide or show menu by default
    //do not forget to set a htlm5 cookie
}else{
   if(localStorage.getItem("toggle") == "yes"){
     //code when menu is visible
   }else{
     //code when menu is hidden
   }
}

More information here

Answer 2

使用隐藏字段。每当打开或关闭面板时，使用JS设置此隐藏字段值，并检查pageload上的隐藏字段。实施例 -

在你的JS中，我使用一个函数来设置哪些面板是打开/关闭的，而第二个是用来排列它们。此示例基于页面上有多个面板，但如果需要，您可以快速更改它以处理一个面板。

function init() {
    if ($("#hdnOpenPanels").val()) {
        $(".fixPanels").click();
    }
}
// Ensures that the correct panels are open on postback
$(".checkPanels").click(function () {
    var checkPanel1= $("#Panel1").hasClass("in");
    var checkPanel2 = $("#Panel2").hasClass("in");
    var checkPanel3 = $("#Panel3").hasClass("in");

    $("#hdnOpenPanels").val(checkPanel1 + "|" + checkPanel2 + "|" + checkPanel3);
});

$(".fixPanels").click(function () {
    if ($("#hdnOpenPanels").val().split('|')[0] === "true") {
        $("#Panel1").collapse('show');
    } else {
        $("#Panel1").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[1] === "true") {
        $("#Panel2").collapse('show');
    } else {
        $("#Panel2").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[2] === "true") {
        $("#Panel3").collapse('show');
    } else {
        $("#Panel3").collapse('hide');
    }
});

现在你有两个简单的类可以添加到任何项目，这些项目需要页面知道哪些面板是打开的（.checkPanels），还有＆＃34;修复＆＃34;哪些面板应该打开（.fixPanels）。如果你在页面上有模态，他们需要＆＃34; fixPanels＆＃34;当他们关闭时（即使可能没有回发）。

关于你的代码隐藏：

将此添加到您的PageLoad：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["sPanels"] != null)
        {
            hdnOpenPanels.Value = Session["sPanels"].ToString();
            Session.Remove("sPanels");
        }

        if (IsPostBack){...}
        else {...}
    }

最后，在导致影响面板的回发的任何代码隐藏函数上，在函数的底部添加这一行：

Session["sPanels"] = hdnOpenPanels.Value;

Answer 3

有许多方法可以实现此目的，包括本地存储，Cookie，URL参数，锚片段和服务器端存储。

如果您需要为用户保留值，无论浏览器如何，您都需要将其作为用户首选项存储在服务器端，以防止识别用户的个人资料。

如果您需要针对单个浏览器实例进行持久化，无论用户如何，您都可以使用客户端解决方案，例如localStorage（用于跨浏览器会话的持久性）sessionStorage（用于单个浏览器会话中的持久性）或cookie（可以被配置为做任何一种）。

例如，这是一个使用localStorage在页面重新加载和浏览器会话之间保持切换状态的解决方案。

此代码不在SO代码段中运行，因此请参阅this Fiddle了解演示。

<强>的Javascript

var menuStateKey = "menu.toggle_nav.state";
$(document).ready(function() {
    var $nav = $("nav");

    var setInitialMenuState = function() {
        // Note: This retrieves a String, not a Boolean.
        var state = localStorage.getItem(menuStateKey) === 'true';
        setNavDisplayState(state);
    };

    var toggleNav = function() {
        var state = $nav.is(':visible');
        state = !state;
        localStorage.setItem(menuStateKey, state);
        setNavDisplayState(state);
    };

    var setNavDisplayState = function(state) {
        if (state) {
            $nav.show();
        } else {
            $nav.hide();
        }
    };

    $("#toggle_nav").click(toggleNav);

    setInitialMenuState();
});

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>I am the nav</nav>
<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">Toggle</a>

Answer 4

您可以在localStorage对象中存储切换状态。

// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("toggleState", value);
    // Retrieve
    localStorage.getItem("toggleState");
} else {
    "Sorry, your browser does not support Web Storage...";
}

查看Local Storage - Dive Into HTML5

可以使用JQuery插件来实现此目的。

$.localStorage;
storage=$.localStorage;
storage.set('foo','value');
storage.get('foo');

在Jquery Storage API了解详情。

干杯！

Answer 5

正如其他人解释我们可以使用localStorage（HTML5），否则我们可以使用cookies

请参阅this article，了解如何使用Cookie保留数据。

由于此实现需要将更少的数据存储在cookie中。使用cookie将是您实施的好方法。

Answer 6

您可以扩展切换

$.prototype._toggle = $.prototype.toggle;
$.prototype.toggle = function() { 
// save to localStorage
$.prototype._toggle.call(this) 
}

编写使用localStorage开始切换的代码

使用JQuery保持切换菜单状态

6 个答案: