如何添加localStorage以显示/隐藏div?在问这个问题之前,我已经看过这篇文章Use localStorage.setItem to keep same show/hide divs,但这对我没有帮助,但我仍然靠我自己做不到,所以我需要帮助!谢谢。 我的代码
$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
});
});
如果已选中复选框.AvGamesCheckBox
,则localStorage隐藏消息id="mesfavgame"
,如果未选中复选框.AvGamesCheckBox
,则localStorage显示消息id="mesfavgame"
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>
答案 0 :(得分:1)
易于使用的本地存储。
您应该做的是保留默认情况下页面中所有更改的变量。
例如,假设您在页面上有一个div,用户可以显示或隐藏它:
#header-div
一开始是隐藏的。 您只需在打开时将其添加到数组中,然后在关闭时将其删除即可。 然后将其保存到本地存储中
openedDivs= [];
$(".clickable-header").click(function() {
if (this.checked) {
$("#header-div").hide();
openedDivs= openedDivs.filter(function(value) { return value !== "header-div" });
localStorage.setItem("openedDivs", openedDivs);
}
else {
$("#header-div").show();
openedDivs.push("openedArray");
localStorage.setItem("openedDivs", openedDivs);
}
});
然后,只需在页面加载时,使用
从存储中获取变量localStorage.getItem("openedDivs")
并使用它将其应用于您的文档。
答案 1 :(得分:1)
$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked && localStorage.getItem("isChecked") != null && localStorage.getItem("isChecked") == "true") {
$("#mesfavgame").hide();
localStorage.setItem("isChecked", "false")
}
else {
$("#mesfavgame").show();
localStorage.setItem("isChecked", "true");
}
});
});
答案 2 :(得分:1)
尝试以下操作:
HTML:
<input type="checkbox" class="AvGamesCheckBox">
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>
JS:
$(function() {
var status = localStorage.getItem('chkStatus');
if(status == 'true'){
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").attr('checked', true)
}
else{
$("#mesfavgame").css("display", "block");
$(".AvGamesCheckBox").attr('checked', false)
}
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
localStorage.setItem("chkStatus", this.checked);
});
});