Question

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

我调查了一个session cookie，但这在用户访问期间仍然存在，而不仅仅是第一次加载。

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

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

Answer 1

首先sessionStorage不适合这种任务，因为一旦用户关闭标签，它就会丢失。您应该使用localStorage。

From mdn web docs

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

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

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

$(function() {
    if (localStorage.getItem("isNewSession")) {
        // The user has been to this page before
    } else {
        // First time on this page
        localStorage.setItem('isNewSession', 'true');
    }
});

Fiddle

Answer 2

使用JavaScript cookie可以解决问题：

以下是https://stackoverflow.com/a/8733385/2969615的略微修改版本，已针对您的目的进行了调整：

if(getCookie("hasPageBeenOpened")) {
    console.log("welcome back");
} else {
    console.log("first time eh?");

    // Build the expiration date string:
    var expiration_date = new Date();
    expiration_date.setFullYear(expiration_date.getFullYear() + 1);
    // Build the set-cookie string:
    var cookie_string = "hasPageBeenOpened=true; path=/; expires=" + expiration_date.toUTCString();
    // Create or update the cookie:
    document.cookie = cookie_string;
}

读取cookie的脚本，我从https://www.w3schools.com/js/js_cookies.asp

抓取

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

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

2 个答案: