我正在创建一个多页面网站，在打开的页面上我有一个 div，里面有两个按钮。单击这些按钮后会更改主题。我有它，因此当您在第一页上点击“黑暗”时，它会将主题更改为“黑暗”。我接下来想要的是拥有它，这样当您进入下一页时，该主题就会继续存在。我也想要它，所以如果您更改第二页上的主题，然后单击主页返回主页或第三页等
现在发生的事情是我成功更改了第一页上的主题，但是当我转到第二页时，询问您想要什么主题的 div 又回来了
这是我的代码
var themes = {
default : "assets/grey.jpg",
dark : "assets/dark.jpg",
light : "assets/background.jpg"
};
var background_image = localStorage.getItem("background-image")
if (background_image !== "assets/grey.jpg"){
$('.popups').css('display', 'block')
} else if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
$('.popups').css('display', 'none')
}
$("#dark, #light, #default").click(function(){
$("body").css( "background-image" , "url("+ themes[this.id] +")" );
$(".popups").toggle();
localStorage.setItem("background-image", themes[this.id]);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>United Photographers Initiative</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class = "navbar navbar-default navbar-static-top">
<div class="container">
<a href ="#" class="navbar-brand">U.P.I.</a>
<img src="assets/camera.png" class="pull-left">
<button class="navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle = "dropdown">Options<b class="caret"></b></a>
<ul class="dropdown-menu">
<li id=default><a href="#">Change Theme</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="popups">
<p>
Select your theme:<br><br>
<button id="dark">DARK</button>
<button id="light">LIGHT</button>
</p>
</div>
<div class="jumbotron text-center">
<h1>Welcome to the <span class="h1Color">U</span>nited <span class="h1Color">P</span>hotographers <span class="h1Color">I</span>nitiative</h1>
<p>This free community for experienced photographers to give back to those who are just starting out, as well as those photographers who are just starting out or are finding it hard to find new locations to shoot when at home or traveling.</p>
<a href="login.html"<button type="button" class="btn btn-danger ">Enter Site</button></a>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">
Site built by Self Aware Machines
</p>
<p>
<div class="input-group col-lg-3 pull-right">
<input type="text" class="form-control" placeholder="Search Site"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script>
// $("body").css( "background-image" , "url("+ localStorage.getItem("background-image") +")" );
</script>
</body>
</html>最佳答案
让我引导您完成代码:
var themes = {
default : "assets/grey.jpg",
dark : "assets/dark.jpg",
light : "assets/background.jpg"
};
var background_image = localStorage.getItem("background-image")
停下来!首先，您假设已设置 localStorage，如果未设置 localStorage 将返回 null 请尝试以下操作:
var background_image;
if(localStorage.getItem("background-image") {
background_image = localStorage.getItem("background-image")
} else {
background_image = themes.defualt
}
好的，继续:
if (background_image !== "assets/grey.jpg"){
$('.popups').css('display', 'block')
} else if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
$('.popups').css('display', 'none')
}
这里，你的意思是如果背景图像是默认的，则显示弹出窗口，否则不显示它们。但是，最好将其实现到我们的 if 条件中，因此:
if(localStorage.getItem("background-image")) {
background_image = localStorage.getItem("background-image")
} else {
background_image = themes.defualt
$('.popups').css('display', 'block')
}
但是要执行此操作，您必须默认将 .popups 设置为 display: none，继续:
$("#dark, #light, #default").click(function(){
$("body").css( "background-image" , "url("+ themes[this.id] +")" );
$(".popups").toggle();
localStorage.setItem("background-image", themes[this.id]);
});
最后一件事:$(".popups").toggle() 应该是 $(".popups").hide() 以确保您的正在隐藏它。
希望能帮到你!
关于javascript - 多页面网站localstorage获取和设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31496638/