Question

我的网络应用中有两个html页面，index.html和topics.html。我在topics.html中有一个按钮，当点击时，它应该在index.html中显示隐藏的Div，这样当我导航到index.html时，Div必须是可见的。我知道这可以通过本地存储和windows.onload来实现，我如何将它合并到我的代码中呢？

topics.html

<button id="show">Show</button>

和JS

$(document).ready(function(){
 $("#show").click(function(){
    $(".me").show();
  });
});

单击#show按钮时，我希望当前隐藏的Div下方显示为这样，这样当我导航到index.html时，div是可见的，当我单击#hide按钮时，它应该是即使页面重新加载，也要保持隐藏状态

Index.html（已编辑）

<div id="rss-feeds" class="me"></div>
<button id="hide">hide</button>

JS

$(document).ready(function(){
  $("#hide").click(function(){
   $(".me").hide();
 });
});

我如何使用本地存储？

Answer 1

如果你命名你的功能很容易：

$(document).ready(function(){

  function showIt(){
    localStorage.shown=1;
    $(".me").show();
  }

  if(localStorage.shown==='1'){ showIt(); }
  $("#show").click(showIt);

});

通过这种方式，您可以从click事件和localStorage启动期间调用相同的例程。

Answer 2

我设法以这种方式使用这个精彩的例子，它可以为任何可能感兴趣的人精美地工作。

https://gist.github.com/jakebresnehan/1983968

<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

<div id="sign-up-form">
<p>Sign up form</p>
</div>

$(document).ready(function($){

if (Modernizr.localstorage) {

 $('#hide-button').click(function(e){
localStorage.setItem('subscribed',true);
  $('#sign-up-form,#hide-button').hide();
  $('#hide-button').hide();
  $('#show-button').show();
});

$('#show-button').click(function(e){
  localStorage.setItem('subscribed',true);
  localStorage.clear();
  $('#sign-up-form,#hide-button').show();
  $('#show-button').hide();
});

var is_subscribed = localStorage.getItem('subscribed');

if(is_subscribed){
console.log('localStorage')
$('#sign-up-form,#hide-button').hide();
}

if(!is_subscribed){
console.log('no localStorage');
$('#sign-up-form').show();
$('#show-button').hide();
}

 } 

 });

本地存储，显示和隐藏不同html页面中的元素

2 个答案: