javascript - 访问者返回网站后不显示弹出窗口

Question

我创建了一个非常简单的弹出窗口。我想要的是，当访问者第一次访问该网站以显示弹出窗口时，他必须选择两个按钮之一才能关闭弹出窗口。此外，我不想在用户之前访问过该站点时显示弹出框。我知道我可以为此使用本地存储，但我不知道该技术。拜托，我需要有人给我写我必须添加到我的代码中的本地存储代码，以便当有人第一次访问该网站时显示弹出窗口并选择两个按钮之一，如果他再次回来做不使用本地存储内存显示弹出窗口。

谢谢

HTML:

    <div id="popup">
       <div id="text">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque minus deleniti ex consequatur, rem, mollitia modi odit? Animi odit provident architecto omnis optio est, ut natus voluptatum, inventore deleniti laboriosam.
        </div>
        <div id="myButtons">
           <button id="button-left">Click Left</a>
           <button id="button-right">Click Right</a>
        </div>
   </div>

CSS:

 #popup {
            width: 30%;
            margin: 50px auto;
            padding: 50px;
            border: 10px solid #000;
        }

        #close-button {
            cursor: pointer;
        }

        #text {
            margin-top: 20px;
        }

        #button-left {
            display: inline-block;
            padding: 10px;
            background: #b4b0a9;
            float: left;
            margin-top: 10px;
        }

        #button-right {
            display: inline-block;
            padding: 10px;
            background: #b4b0a9;
            float: right;
            margin-top: 10px;
        }

JavaScript:

   var popup = document.getElementById("popup");
   var close_button = document.getElementById("close-button");
   var mainText  = document.getElementById("text");
   var button_left = document.getElementById("button-left");
   var button_right = document.getElementById("button-right");


    function closeBoxLeft() {
       popup.style.display = "none";
    }
    button_left.addEventListener("click", closeBoxLeft)

    function closeBoxRight() {
       popup.style.display = "none";
    }
    button_right.addEventListener("click", closeBoxRight)

Answer 1

这是一般的想法。通过localStorage.getItem()读取popup项，如果不存在则显示popup并通过设置popup >localStorage.setItem()

var ls = localStorage.getItem('popup');
if (!ls) {
  document.getElementById('popup').classList.add('show');
  localStorage.setItem('popup',true);
}

.popup {
  display: none;
}
.show {
  display: block;
}

<div id="popup" class="popup">popup</div>