时间戳

首页 > 解决方案 > 在 Javascript 中使用 localStorage 仅向新用户或 30 分钟后返回的用户显示模式

javascript - 在 Javascript 中使用 localStorage 仅向新用户或 30 分钟后返回的用户显示模式

问题描述

正如问题的声音一样，我网站的每个 html 页面上都有一个弹出模式。我想向我的网站的新用户或已经访问过我的网站并在 30 分钟会话后再次访问的用户展示该模式。我想用 JS 中的 localStorage 来做（没有 JQuery）。

这是JS代码 -

const body = document.querySelector("body");
const modal = document.querySelector(".modal");
const closeButton = document.querySelector(".close-button");
const skipOptinForm = document.querySelector(".skip-optin-form-text");
let isOpened = false;

function updateModalSession() {
    localStorage.setItem("visitTime", getTimestampSeconds());
}
function getTimestampSeconds() { // Returns the unix timestamp in seconds
    var time_stamp = 0;
    if(time_stamp = Math.floor(Date.now() / 1000)){}
    else
        time_stamp = Math.floor(new Date().getTime()  / 1000);
    
    return time_stamp;
}
function getModalShowPermission() {
    var currentTimeStamp = getTimestampSeconds();
    var storedTimeStamp =  parseInt(localStorage.getItem("visitTime"));
    
    if(localStorage.getItem("visitTime") == "null") {
        console.log("New User. modal show permision granted");
        return true;
    } else if((currentTimeStamp - storedTimeStamp) >= 1800) {
        console.log("Returning User after 30 mins session. modal show permision granted");
        return true;
    } else {
        console.log("Not new nor returning after 30 mins session. modal show permision denied");
        return false;
    }
}
const openModal = () => {
    if(getModalShowPermission() == true) {
        updateModalSession();
        modal.classList.add("is-open");
        body.style.overflow = "hidden";
    }   
};

const closeModal = () => {
  modal.classList.remove("is-open");
  body.style.overflow = "initial";
};

window.addEventListener("scroll", () => {
  if (window.scrollY > window.innerHeight / 3 && !isOpened) {
    isOpened = true;
    openModal();
  }
});
closeButton.addEventListener("click", closeModal);
skipOptinForm.addEventListener("click", closeModal);
document.onkeydown = evt => {
  evt = evt || window.event;
  evt.keyCode === 27 ? closeModal() : false;
};

该代码适用于老用户，但不适用于新用户。上面的代码没有向新用户显示模式。

标签： javascriptlocal-storage

解决方案

问题在于第一个 if 子句 -

if(localStorage.getItem("visitTime") == "null")

if 条件应该是 -

if(localStorage.getItem("visitTime") == null)

localStorage.getItem(key)当密钥在存储中不可用时返回null

和，

localStorage.getItem(key)当密钥在存储中可用时返回字符串

推荐阅读