Javascript JS本地存储

我遇到了一个警告框的问题，每当你使用“幻灯片自动前进已停止”的控件浏览我的幻灯片时，我都会显示该警告框 因此，我想知道是否有一种方法可以像cookie或任何东西一样在本地存储信息，这样，如果他们按一下控件，看到消息，如果他们继续导航，它就会停止显示

JS脚本

$（文档）.ready（函数（）{
$（“#按1”）。单击（函数（）{
jConfirm（'Slideshow auto advance已停止！
按“确定”停止显示此消息2小时，'Website alert'）；
});
});
$（文档）.ready（函数（）{
$（“#按2”）。单击（函数（）{
jConfirm（'Slideshow auto advance已停止！
按“确定”停止显示此消息2小时，'Website alert'）；
});
});
$（文档）.ready（函数（）{
$（“#按3”）。单击（函数（）{
jConfirm（'Slideshow auto advance已停止！
按“确定”停止显示此消息2小时，'Website alert'）；
});
});
$（文档）.ready（函数（）{
$（“#按4”）。单击（函数（）{
jConfirm（'Slideshow auto advance已停止！
按“确定”停止显示此消息2小时，'Website alert'）；
});
});

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>

事实上，我认为你可以在这里做很多事情

实际上，您只需要1 document.ready，并且选择器语句中可以有多个元素

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

对于您的特定问题，我只需设置一个布尔值，该布尔值以true开头，将显示一次，然后在显示消息后，它将设置为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;
            }
        });
    });

$（文档）.ready（函数（）{
var msg=“Slideshow auto advance已停止！
按“确定”停止显示此消息2小时。”；
var displayAlert=true；
$（“#按1，#按2，#按3，#按4，#按5”）。单击（功能（）{
如果（显示警报）{
jConfirm（msg，“网站警报”）；
displayAlert=false；
}
});
});

我真的不太明白你的具体要求，但这是一个悬而未决的问题

您可以使用window.localStorage（无论页面是否重新加载，浏览器都会为您的网站保留该对象）

你可以像这样设置一面旗帜

$(document).ready( function() {
    window.localStorage['messaged_displayed'] = false;
});

对于第一次重新加载。。 无论何时，只要你想显示信息，就去做

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

if（！window.localStorage['messaged_displated']））{
jConfirm（'Slideshow auto advance已停止！
按“确定”停止显示此消息2小时，'Website alert'）；
window.localStorage['messaged_displated']=true；
}

然后在2小时后再次将标志重置为false

如果你不知道如何实现这一点， 我想编辑Dylan Hayes的例子

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

$（文档）.ready（函数（）{
var msg=“Slideshow auto advance已停止！
按“确定”停止显示此消息2小时。”；
$（“#按1，#按2，#按3，#按4，#按5”）。单击（功能（）{
rightNow=新日期（）
if（window.localStorage['lastClicked']）
{
如果（rightNow-window.localStorage['lastClicked']>7200000）{//2小时的毫秒数
jConfirm（msg，“网站警报”）；
window.localStorage['lastClicked']=rightNow
}
}
否则{
window.localStorage['lastClicked']=rightNow
}
});
});

它似乎可以工作，但当您重新加载页面时，它会被重置。我希望它能持续2个小时，然后它会重置。假设你理解迪伦·海斯写的内容，我将扩展他的答案，以解释这个问题！警报框根本不会显示现在在不同的计算机上试用过，并且已经试用过不同的浏览器您的代码中一定有问题，或者浏览器不兼容HTML5。它在一个浏览器中工作，而在另一个浏览器上不工作？请注意，localStorage变量是由浏览器存储的，因此任何其他浏览器都不会知道它。。。如果你想在全球范围内为你的情况提供支持，你必须使用服务器