sessionStorage的 - 只有做初始頁面加載行為

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 。

如果在sessionStorage返回true將其設置為false ，那么顯然我想發生的事情就不會發生。

我調查了一個會話cookie，但這在整個用戶訪問期間仍然存在，而不僅僅是第一次加載。

我該如何處理？ 如何僅在初始頁面加載時觸發事件， 而不在其余用戶訪問時觸發事件？

上下文：“事件”是在導航欄的動畫。

Answer 1

首先sessionStorage是不適合這樣的任務，因為一旦用戶關閉該標簽將丟失。 您應該為此使用localStorage 。

來自MDN Web文檔

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

小提琴

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