JS локальное хранилище

Question

У меня возникла проблема с предупреждающим полем, которое я сделал, чтобы отображаться каждый раз, когда вы перемещаете мое слайд-шоу с помощью элементов управления, в которых говорится, что «Слайд-шоу автоматически остановлено» Так что мне интересно, есть ли способ сделайте как куки-файл или что-нибудь, чтобы хранить информацию локально, чтобы, если они один раз нажмут элемент управления и увидите сообщение, оно перестанет отображаться, если они продолжат навигацию.

JS скрипт

<script> 
     $(document).ready(function() { 

       $("#pressed1").click(function() { 
        jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert'); 
       }); 

      }); 

     $(document).ready(function() { 

       $("#pressed2").click(function() { 
        jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert'); 
       }); 

      }); 

     $(document).ready(function() { 

       $("#pressed3").click(function() { 
        jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert'); 
       }); 

      }); 

     $(document).ready(function() { 

       $("#pressed4").click(function() { 
        jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert'); 
       }); 

      }); 
</script> 

HTML код

<div id="main2"> 
    <div id="gallery"> 

    <div id="slides"> 
    <div class="slide"><img src="imgs/slide.imgs/1.jpg" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div> 
    <div class="slide"><img src="imgs/slide.imgs/1.jpg" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div> 
    <div class="slide"><img src="imgs/slide.imgs/3.gif" onmousedown="return false;" style="border-style: none" width="1040" height="400" alt="side" /></div> 
    <div class="slide"><a href="buywebdesign.html" onmousedown="return false;" target="_blank"><img src="imgs/slide.imgs/4.gif" style="border-style: none" width="1040" height="400" alt="side" /></a></div> 
    </div> 

    <div id="menu"> 
    <ul><div class="thumbs"> 
     <li class="fbar">&nbsp;</li> 
     <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed1" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li> 
     <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed2" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li> 
     <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed3" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li> 
     <li class="menuItem"><a href=""><img src="imgs/slide.imgs/thumb_ball.png" id="pressed4" onmousedown="return false;" style="border-style: none" alt="thumbnail" /></a></li> 
    </div> </ul> 
    </div> 
    </div> 
</div> 

Answer 1

Я действительно не понимаю, ваши конкретные требования, но вот выстрел в воздух ..

Вы можете использовать window.localStorage (объект, который будет сохранен в браузере для вашего веб-сайта, независимо от страницы перезагружается)

вы можете установить флаг как

для первой перезагрузки .. и всякий раз, когда вы хотите, чтобы отобразить Сообща e just do

if(!window.localStorage['messaged_displayed']) { 
    jConfirm('Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour.', 'Website alert'); 
    window.localStorage['messaged_displayed'] = true; 
} 

затем снова сбросьте флаг на false через 2 часа.

если вы не знаете, как осуществить это то, я хотел бы изменить пример Дилана Хейса

$(document).ready(function() { 
    var msg = "Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour."; 

    $("#pressed1, #pressed2, #pressed3, #pressed4, #pressed5 ").click(function() { 
     rightNow = new Date() 
     if (window.localStorage['lastClicked']) 
     { 
      if (rightNow - window.localStorage['lastClicked'] > 7200000) { // milliseconds of 2 hrs 
       jConfirm(msg, 'Website alert'); 
       window.localStorage['lastClicked'] = rightNow 
      } 
     } 
     else { 
      window.localStorage['lastClicked'] = rightNow 
     } 
    }); 
}); 

Answer 2

На самом деле я думаю, что есть, вероятно, целый ряд вещей, которые вы могли бы сделать здесь.

Вам действительно нужен только 1 document.ready, и вы можете иметь более одного элемента в инструкции селектора.

Для вашей конкретной задачи я бы просто установил логическое значение, которое начинается с истины, будет отображаться один раз, а затем, как только сообщение будет отображаться, оно будет установлено в false и больше не будет входить в оператор if().

$(document).ready(function() { 
     var msg = "Slideshow auto advance has stopped!<br />Press OK to stop showing this message for 2 hour."; 
     var displayAlert = true; 

     $("#pressed1, #pressed2, #pressed3, #pressed4, #pressed5 ").click(function() { 
      if (displayAlert) { 
       jConfirm(msg, 'Website alert'); 
       displayAlert = false; 
      } 
     }); 
    });