多页网站localstorage的获取和设置

Question

我正在创建一个多页网站，在首页上有一个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">UPI</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>

Answer 1

让我逐步介绍您的代码：

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通过defualt 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() ，以确保您隐藏了它。

希望我能帮上忙！

Answer 2

background_image !== "assets/grey.jpg"

也许将其更改为

background_image === "assets/grey.jpg"

更好的是：

if(background_image === "assets/dark.jpg" || background_image === "assets/background.jpg"){
  $('.popups').hide() // the same as setting display: none
}

无需设置div display：block，因为默认情况下它是block。

多页网站localstorage的获取和设置

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-07-19 01:04:25

解决方案2
0 2015-07-18 23:51:50

多页网站localstorage的获取和设置

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-07-19 01:04:25

解决方案2 0 2015-07-18 23:51:50

解决方案1
1 已采纳 2015-07-19 01:04:25

解决方案2
0 2015-07-18 23:51:50