时间戳

首页 > 解决方案 > sessionStorage - 仅在初始页面加载时执行行为

javascript - sessionStorage - 仅在初始页面加载时执行行为

问题描述

我不明白 sessionStorage 是如何工作的。我希望仅在初始页面加载时发生事件。

我正在（尝试）通过检查会话是否是新的来做到这一点。思路如下：

$(function() {
  sessionStorage.setItem('isNewSession', 'true');
  if (sessionStorage.getItem("isNewSession")) {
    // do stuff on the first page load
  } else {
    // don't do it after
  }
});

因此，当页面第一次加载时，它看起来像是sessionStorage设置为true. 之后，在用户访问页面期间，我只想发生一次的事情总是发生，因为我可以看到sessionStorage总是true.

如果我将它设置为false如果 sessionStorage 返回true，那么显然我想要发生的事情就不会发生。

我调查了一个会话 cookie，但这在整个用户访问期间再次持续存在，而不仅仅是第一次加载。

我该如何处理？如何仅在初始页面加载时触发事件，而不是在剩余用户访问期间触发？

FOR CONTEXT：“事件”是导航栏中的动画。

标签： javascriptjquerysession

解决方案

首先sessionStorage不适合这种任务，因为一旦用户关闭选项卡，它就会丢失。你应该使用localStorage这个。

来自 mdn 网络文档

sessionStorage 属性允许您访问当前源的会话存储对象。sessionStorage 类似于 Window.localStorage；唯一的区别是虽然存储在 localStorage 中的数据没有设置过期时间，但存储在 sessionStorage 中的数据会在页面会话结束时被清除。只要浏览器打开并在页面重新加载和恢复后仍然存在，页面会话就会持续。

其次，您在检查之前设置isNewSession 。虽然你应该只设置它，如果你知道它没有设置。

因此，您更正后的代码应如下所示：

$(function() {
    // Determine if is the first time on this page
    if ( ! localStorage.getItem("beenHereBefore")) {
        localStorage.setItem('beenHereBefore', 'true');
    }
});

小提琴

推荐阅读