我怎样才能做一个只运行一次的javascript答案

【问题标题】：How can I do a javascript that only runs once我怎样才能做一个只运行一次的javascript
【发布时间】：2018-07-01 08:40:46
【问题描述】：

我有这个 jquery 代码：

$(document).ready(function(){
  $(".body").hide();

  setTimeout(function() {
    $(".body").show()
  }, 2000);

  setTimeout(function() {
    $(".img").fadeOut(1000)
  }, 1000);
});

我希望它只在第一次点击页面时才起作用。因此，当您重新加载页面或浏览该站点并返回该站点时，上述脚本将不会执行。

【问题讨论】：

在第一个页面加载时设置cookie或localstorage值，并检查是否设置。如果是，做动画，否则不
那么您是否希望函数内的所有内容都只执行一次？
@GeorgeJempty 你得解释一下。
@GeorgeJempty 在没有浏览器存储或某种会话管理的情况下，您将如何在页面重新加载之间保留数据？
正如安东尼所说，您需要使用 localstorage、cookie 甚至会话在浏览器中保存一个值，我建议使用 web storage

标签： javascript jquery

【解决方案1】：

您可以使用localStorage 在浏览器级别存储值，因此下次用户访问您的网站时，他们将获得相同的数据。如果您在他们访问您的网站时设置了一个标志，那么您可以告诉他们第一次访问的时间，因为没有设置该标志。

这是添加到您的代码中的更改，以及相应的 cmets...

$(document).ready(function(){

    // check localStorage to see if we've run this before.  If we have then do nothing
    if (!localStorage.getItem("first-run")) {

        // set a flag in localStorage so we know we've run this before.
        localStorage.setItem("first-run", true);

        $(".body").hide();

        setTimeout(function() {
            $(".body").show()
        }, 2000);

        setTimeout(function() {
            $(".img").fadeOut(1000)
        }, 1000);
    }
});

【讨论】：

不要试图删除我的答案。评论并解释您为什么认为它是错误的，或者以匿名的方式留下反对票。

【解决方案2】：

试试这样的。

$(document).ready(function() {
    if(!localStorage.visited) {
        //do first page load stuff
        ...
        localStorage.visited = true;
    }
});

【讨论】：

谢谢大家，感谢你们为我设法做我想做的事情提供的所有帮助。有一个美好的未来。

【解决方案3】：

这里已经有使用localStorage的解决方案；但是，localStorage 中设置的值将保持为until the user clears their browser data。这意味着您的代码将永远不会再次运行，除非您专门做额外的工作来检查它已设置多长时间等。

如果您希望它在他们稍后访问该页面时再次运行，您应该使用sessionStorage：

...存储在 sessionStorage 中的数据在页面会话时被清除结束。只要浏览器打开，页面会话就会持续并且在页面重新加载和恢复后仍然存在。 在新标签页中打开页面或窗口将导致启动一个新会话，这与会话 cookie 的工作原理。

这将允许代码在新访问页面时运行，但重新加载或导航离开/返回不会触发它，因为 sessionStorage 仍然设置。但是，如果他们关闭选项卡/窗口并稍后返回，代码将再次运行。

$(document).ready(function() {
    if(!sessionStorage.visited) {
        sessionStorage.visited = true;
        ...
        //other code
    }
});

【讨论】：