Локальное хранилище, Показать и скрыть элементы на разных HTML-страницах

Question

Локальное хранилище, Показать и скрыть элементы на разных HTML-страницах

0

У меня есть две html-страницы в моем веб-приложении, index.html и themes.html. У меня есть кнопка в topic.html, которая при щелчке должна сделать видимым скрытое Div в index.html, чтобы при перемещении к 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();
 });
});

Как я могу использовать локальное хранилище для этого?

Shingai Munyuki 05 март 2014, в 23:21

Источник

Теги:

javascript

jquery

html

local-storage

show-hide

2 ответа

0

Мне удалось сделать это так, используя этот замечательный пример, и он прекрасно работает для всех, кто может быть заинтересован.

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();
}

 } 

 });

Shingai Munyuki 05 март 2014, в 22:33

Ещё вопросы

dandavis · Accepted Answer · 2014-03-05T19-41-00.000Z

легко, если вы назовете свою функцию:

$(document).ready(function(){

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

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

});

таким образом вы можете вызывать одну и ту же процедуру из события click и во время загрузки из localStorage.

благодарю вас. как только я попытался протестировать ваш код, я заметил, что мне нужно поместить кнопку #hide на элемент div, который должен сохраняться или перезагрузиться, затем я также использовал код для кнопки hid, единственная проблема заключается в том, что он не сохраняется когда я перезагружаю страницу, чтобы я не смог проверить код. пожалуйста, посмотрите на редактирование, которое я сделал в оригинальном сообщении. Еще раз спасибо @dandavis
Я вернусь к вам позже сегодня вечером, но, кажется, вы можете просто настроить селекторы css в моем ответе и изменить шоу, чтобы скрыть ...