Question

当你访问我的网站时，我会看到弹出窗口 - 它是一个警告标签。我只希望它出现在第一次访问而不是再次出现。目前，每当我点击刷新或返回主页时，它就会出现。

以下是JavaScript代码（只要有人点击“警告按钮输入”）：

<script>
"use strict"
warning_popup();

function warning_popup() {
    addEventListener('load', start);

    function start() {
        // popup block background
        var bkg = document.createElement("div");
        bkg.id = "warning-background";
        document.body.insertBefore(bkg, document.body.firstChild);

        // popup window
        var box = document.createElement("div");
        box.id = "warning-window";
        document.getElementById("warning-background").appendChild(box);

        // warning title
        var title = document.createElement("div");
        title.id = "warning-title";
        title.className = "page-title-wrapper page-title";
        title.innerHTML = "<h1>Binge Eating Disorder<\h1>";
        document.getElementById("warning-window").appendChild(title);

        // warning description
        var desc = document.createElement("div");
        desc.id = "warning-desc";
        desc.className = "page-desc";
        desc.innerHTML = "<p>Binge Eating Disorder is disease that I take very seriously.<p>";
        document.getElementById("warning-window").appendChild(desc);

        // warning button enter
        var enter = document.createElement("div");
        enter.id = "warning-enter";
        enter.className = "page-desc";
        enter.innerHTML = "<p>View</p>";
        document.getElementById("warning-window").appendChild(enter);


        // warning button back
        //var back = document.createElement("div");
        //back.id = "warning-back";
        // back.className = "page-desc";
        // back.innerHTML = "<p>Take Me Back</p>";
        // document.getElementById("warning-window").appendChild(back);

        // listens for button clicks
        document.querySelector("#warning-enter").addEventListener("click", function() {
            document.querySelector("#warning-background").style.visibility = "hidden";
        });
        document.querySelector("#warning-back").addEventListener("click", function() {
            window.history.back();
        });
    }
}

Answer 1

我认为localStorage可以解决您的问题。考虑这个例子：

window.onload = init;

function init() {
  if (localStorage.getItem('first_time') === "undefined" || localStorage.getItem('first_time') === null) {
    // Set the storage key and show the warning—but only this one time
    localStorage.setItem('first_time', true);
    showWarning();
  }
}

function showWarning() {
  console.log("Showing warning...");
}

加载此代码只会触发showWarning功能一次。

https://jsfiddle.net/ez2qqpbx/

一次显示弹出窗口

1 个答案: