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

Question

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

我(尝试)通过检查 session 是否是新的来做到这一点。想法如下:

$(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 那么显然我想要发生的事情不会发生。

我调查了session cookie但这种情况在用户访问过程中仍然存在，而不仅仅是第一次加载。

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

上下文:“事件”是导航栏中的动画。

Answer 1

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

From mdn web docs

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage; the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

其次，您在检查之前设置了isNewSession。虽然您应该仅在知道它未设置的情况下设置它。

所以您更正后的代码应如下所示:

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

Fiddle