JS本地存储
问题描述:
我有这个问题,我已经尽了一切时间来显示您浏览使用规定“幻灯片自动播放已停止” 所以我想知道的控制我的幻灯片显示一个警告框
是有办法像Cookie或任何东西一样在本地存储信息,以便如果他们按下控件一次,并看到消息,它将停止显示,如果他们继续导航。JS本地存储
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"> </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>
答
我真的不知道您的具体要求,但这里的空气中的一杆..
您可以使用window.localStorage(即会被浏览器为您的网站被保留页面重新加载的对象无关)
您可以设置类似
标志的第重装.. ,只要你想显示messag e只是做
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;
}
然后在2小时后再次将标志重置为false。如果你不知道如何实现这一然后
, 我想编辑迪伦海耶斯的例子
$(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
}
});
});
答
其实我觉得有可能是很多事情,你可以在这里做。
您确实只需要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;
}
});
});
+0
看来工作,但是当你重新加载页面它会复位。我希望它持续2小时,然后它会重置。 – 2013-05-10 07:47:02
不知道我是如何放入该代码。 – 2013-05-10 07:48:39
假设你明白迪伦海耶斯写了什么,我正在延伸他对答案的解释@MauritzN – 2013-05-10 09:10:27
它似乎在工作,谢谢:) – 2013-05-10 10:42:35