我有一个用于菜单的HTML切换按钮:
<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">
我该如何保存开关状态以便在页面加载时重新加载它?
我已经开始了:
$(document).ready(function() {
$("#toggle_nav").toggle(function() {
});
});
但我不确定要使用什么来保持状态。
我有一个用于菜单的HTML切换按钮:
<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">
我该如何保存开关状态以便在页面加载时重新加载它?
我已经开始了:
$(document).ready(function() {
$("#toggle_nav").toggle(function() {
});
});
但我不确定要使用什么来保持状态。
像评论中所说的那样,您可以使用HTML 5 Web Storage。
您有两种类型:
- 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
}
}
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');
}
});
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;
正如其他人所解释的,我们可以使用localStorage(HTML5)或者使用cookies。
请参考这篇文章,了解如何使用cookies来持久化数据。
由于此实现需要在cookie中存储较少的数据,因此使用cookie是您的最佳选择。
有许多方法可以实现这一点,包括本地存储、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>
您可以将切换状态存储在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...";
}
有可用的JQuery插件来方便此操作。
$.localStorage;
storage=$.localStorage;
storage.set('foo','value');
storage.get('foo');
请访问Jquery Storage API以获取更多信息。
祝好!
你可以扩展切换
$.prototype._toggle = $.prototype.toggle;
$.prototype.toggle = function() {
// save to localStorage
$.prototype._toggle.call(this)
}
并编写使用localStorage来启动切换的代码
localStorage
。 - alesc