如何将点击事件保存到本地存储以隐藏用户的弹出窗口。他需要单击接受一次。如果他将单击取消，则弹出窗口应再次打开答案

【问题标题】：how to save click event to local storage to hide popup from user. He need to click accept once. If he ll click cancel the popup should opens again如何将点击事件保存到本地存储以隐藏用户的弹出窗口。他需要单击接受一次。如果他将单击取消，则弹出窗口应再次打开
【发布时间】：2018-02-28 17:37:32
【问题描述】：

如何将点击事件保存到本地存储以向用户隐藏弹出窗口。他需要单击接受一次。如果他点击取消，弹出窗口应该会再次打开

https://jsfiddle.net/npdqq2dt/5/

<div id="overlay">
  <div class="popup">
    <div id="popup_terms">
      blablabla
    </div>
    <button id="accept" type="button">accept</button>
    <button id="cancel" type="button">cancel</button>
  </div>
</div>


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}
.popup {
    color: #525252;
    background: #0c2333;
    top: 20%;
    left: 0px;
    right: 0;
    font-size: 14px;
    margin: auto;
    width: 65%;
    height: 600px;
    min-width: 350px;
    max-width: 100%;
    position: absolute;
    padding: 40px 65px;
    z-index: 1000;
}

你能提供使用 JQuery 的解决方案吗？谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

您不需要 jQuery 来操作本地存储。这里举个简单的例子：

$(function() {
  if (localStorage.getItem('popup_accepted')) {
    $('#overlay').remove();
  } else {
    $('#accept').click(function() {
      localStorage.setItem('popup_accepted');
      $('#overlay').remove();
    });

    $('#cancel').click(function() {
      $('#overlay').remove();
    });
  }
});

我无法创建有效的 sn-p，因为我们无法在 sn-p 中访问 localStorage。

【讨论】：

【解决方案2】：

使用Javascript函数获取和设置cookie

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 999;
            -webkit-animation: fade .6s;
            -moz-animation: fade .6s;
            animation: fade .6s;
            overflow: auto;
        }

        .popup {
            color: #525252;
            background: #0c2333;
            top: 20%;
            left: 0px;
            right: 0;
            font-size: 14px;
            margin: auto;
            width: 65%;
            height: 600px;
            min-width: 350px;
            max-width: 100%;
            position: absolute;
            padding: 40px 65px;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <button id="btn">Open Overlay</button>
    <div id="overlay">
        <div class="popup">
            <div id="popup_terms">
                blablabla
            </div>
            <button id="accept" type="button">accept</button>
            <button id="cancel" type="button">cancel</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script>
        $(function () {
            var storageName = 'rememberMe';
            $('#btn').on('click', function () {
                if (localStorage.getItem(storageName)) {
                    return false;
                } else {
                    $('#overlay').show();
                }
            });

            $('#accept').on('click', function () {
                localStorage.setItem(storageName, true);
                $('#overlay').hide();
            });

            $('#cancel').on('click', function () {
                $('#overlay').hide();
            });
        });
    </script>
</body>

</html>

【讨论】：

它不能在任何基于 Web 的 IDE 中工作，因为它们不允许写入任何 cookie。您可以在本地机器上进行测试。
当问题是关于本地存储时，为什么要使用 cookie 解决方案？
哦，我错过了那部分......让我改变它。
正如我在自己的回答中所说，由于此错误，代码 sn-p 将不起作用：SecurityError: The operation is insecure.（我们无权访问代码 sn-p 中的 localStorage）。但是你的代码现在没问题了。