当用户关闭<div>时，在所有网站页面上隐藏<div>

Question

我开发了一些显示在所有网站页面上的警告框。

用户可以单独关闭每个框：

$(document).ready(function() {
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
  });
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

jsFiddle

现在我需要确保用户关闭的框（可能是一个，可能是两个），不会在他/她浏览网站时重新显示，或重新加载页面。

我想我可以将PHP Cookie设置为24小时后到期。但是本网站上的大部分相关帖子都推荐使用JavaScript cookie。不幸的是，我实现JavaScript解决方案的努力没有奏效（关闭后框重新出现）。我已经尝试了各种方法，如下所述：

• Set cookie to hide div when button is clicked
• Set cookie when my div is hidden
• jQuery Cookie hide/show div
• Hide div 24hr cookie javascript?

在24小时内，在整个网站上隐藏每个框的简单方法是什么？

我对jQuery，纯JavaScript，PHP，cookie，会话或其他东西持开放态度。

Answer 1

使用localStorage()。

本地存储是按来源（每个域和协议）

• 点击DIV关闭后，您可以获得当前时间戳
• 向该时间戳添加小时数（24）
• 将该值存储在localStorage localStorage.setItem('desiredTime', time)
中
• 根据localStorage.getItem('desiredTime')
检查当前带有存储时间戳show/hide的时间戳

<强>的jQuery

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

注意事项

• 您也可以使用$.cookie，但现在这是一种较旧的方法。
• <div>只有hide24课程才会被隐藏。
• 请确保将此代码放在通用JavaScript中，该JavaScript会加载您网站的每个HTTP请求。
• 对于localStorage，您应该拥有HTML5浏览器。

Web Storage HTML5

希望这有帮助。

Answer 2

关注@Loading ..回答：

  

警报框在重新加载之前总会重新出现   消失。有什么想法吗？

为什么会这样？

$(document).ready()内的函数将一直执行，直到加载整个DOM。这就是呈现警报的原因，然后一旦函数运行，它就会隐藏它们。

<强>解决方案：

您最初可以使用类隐藏警报，以便利用浏览器在构建CSSOM之前不会呈现内容。

我们使用的课程只是设置属性display: none;。

.hidden {
  display: none;
}

这当然会导致浏览器重绘。 （见注释）

您的逻辑已经显示警告

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

因为使用.show()将添加内联样式display: block;，它将具有比.hidden类更高的特异性，显示警报。

<强> jsFiddle

备注：

• 使用display: none;会将内容推送到提醒下方或    下。如果您愿意，可以使用其他方法，例如visibility: hidden;或transform，这不在本答案的范围内。

编辑：

下面将举例说明以下步骤：

• 演示计数器增加到20秒进行测试。
• 我们点击以关闭提醒并触发localStorage功能，设置desiredTime键。
• 设置密钥后，我们刷新浏览器并多次点击运行以查看密钥是否正常工作。

• 最后，为了检查密钥确实已设置，我们转到：

  DevTools（F12） - ＆gt;应用程序选项卡 - ＆gt;本地存储 - ＆gt; jsFiddle shell。

• 在倒计时结束后再次点击运行，再次显示警告。

插图：

如果不能正常工作，我们可能需要进一步的细节来解决这个问题。

Answer 3

据我了解您的问题，将警报隐藏24小时（然后在一天之后再次显示所有）将是糟糕的用户体验。

我假设你从某种数据库加载这些警报。如果是这样，正确的答案是在那里存储状态。无论是status列还是deleted_at时间戳，实施都是无穷无尽的。

无论哪种方式，我都会在数据库中存储警报状态，并在相应提取时过滤您的数据。

因此在你看来你会（假设这里有php）：

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <a class="alert-box-close" id="close-alert-box-news">
          <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""  >
        </a>
    </article>
<?php endif; ?>

然后，您会因此想要添加某种端点来更改该数据库状态：

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

注意：此答案旨在指向正确的方向，而不是编写代码。以上所有代码都是完全未经测试的，因此如果您只是复制并粘贴它，可能无效。

Answer 4

  

它在stackoverflow中不起作用。你可以在演示链接中测试

Demo

＆＃13;

＆＃13;

$(document).ready(function() {
  checkCookie("alertDisplayed")
  $("#close-alert-box-news").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function checkCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.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) {
      $(".alert-box").hide();
    }
  }
  return;
}

＆＃13;

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试此解决方案jsfiddle并阅读有关存储路径的注释。如果您正在使用sub domain，则必须在cookie中指定域，如setCookie()条评论中所述。如果您是working on localhost，那么Cookie域必须设置为＆＃34;＆＃34;或NULL或FALSE而不是＆＃34; localhost＆＃34;。对于域名参考，您可以学习this stackoverflow question

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    // document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
} 
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.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 "";
}
$(document).ready(function() {
  if(getCookie('news')==1) { //check if cookie news exist if exist then hide.
    $("#alert-box-news").hide();
  }
  if(getCookie('maintenance')==1) { //check if cookie maintenance exist if exist then hide.
    $("#alert-box-maintenance").hide();
  }
  $("#close-alert-box-news").click(function() {
    setCookie('news',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie('maintenance',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-maintenance").hide(800);
  });
});

Answer 6

使用sessionStorage的javascript可能会这样做。

例如：

在sessionStorage中存储当前日期（var currentDate）和一分钟后的日期（var afterOneMinute）。 每次点击按钮或重新加载页面，更改当前日期并将其与afterOneMinute变量进行比较，然后隐藏或显示框

html文件

<head>
    <script src="jquery.js"></script>
</head>
<body>
<button onclick="hideOneMinute()">Hide box while 1 minute </button>
<div id="box" style="border: 1px solid red; display: inherit">
    <h2>Box</h2>
    hello
</div>
<div id="messageBox"></div>
</body>

JS

<script>
    var currentDate, afterOneMinute;
    function addDate(){
        var current = new Date();
        // Converts current date in seconds
        currentDate = current.getHours()*3600+current.getMinutes()*60+current.getSeconds();
        // Current date + 1 minute
        afterOneMinute = currentDate + 1*60;
    }
    addDate();
    console.log(currentDate);
    // verify sessionStorage when page is reloaded    ;
    if(typeof(Storage) !== "undefined") {
        if(sessionStorage.currentDate){
            addDate();
            sessionStorage.currentDate = currentDate;
            if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
            {
                $('#box').hide();
                console.log('hide');
            }
            else{
                sessionStorage.clear();
                console.log('show');
                $('#box').show();
            }

        }
    }
    function hideOneMinute() {
        if(typeof(Storage) !== "undefined") {
            if(sessionStorage.currentDate){
                addDate();
                sessionStorage.currentDate = currentDate;
                if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
                {
                    $('#box').hide();
                }
                else{
                    sessionStorage.clear();
                    console.log('show');
                    $('#box').show();
                }

            }else{
                addDate();
                sessionStorage.currentDate = currentDate;
                sessionStorage.afterOneMinute = afterOneMinute;
                console.log('hide');
                $('#box').hide();
            }
            document.getElementById("messageBox").innerHTML = "Box will be shown at " + sessionStorage.afterOneMinute;
        } else {
            document.getElementById("messageBox").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>

Answer 7

Cookie和本地存储有不同的用途。 Cookie主要用于阅读服务器端， 本地存储只能在客户端读取。

在您的情况下，您通过发送每个HTTP标头中的所有数据来浪费带宽。所以我建议你使用HTML本地存储 而不是cookie。

根据技术差异以及我的理解：

• 除了作为一种保存数据的旧方法之外，Cookies还为您提供了4096字节的限制 - 每个cookie。 本地存储大小为每个域5MB
• localStorage是存储接口的实现。它存储的数据没有到期日期，并被清除 只有通过JavaScript，或清除浏览器缓存/本地存储的数据 - 与cookie过期不同。

https://jsfiddle.net/eath6oyy/33/

＆＃13;

＆＃13;

$(document).ready(function() {
var currentTime = new Date().getTime();
var timeAfter24 = currentTime + 24*60*60*1000;
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime') >= currentTime)
  {
    $('#alert-box-news').hide();
  }else{
    $('#alert-box-news').show();
  }
  
  
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime1', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime1') >= currentTime)
  {
    $('#alert-box-maintenance').hide();
  }else{
    $('#alert-box-maintenance').show();
  }
 
});

＆＃13;

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

＆＃13;

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 8

我的回答是@Loading's answer的扩展。页面加载时内容闪现的问题，即使用户选择取消警报，也是由于在加载DOM后对localStorage进行了评估。

因此，我建议默认隐藏警报，即使这可能是没有启用JS的浏览器的问题。但是，如果使用modernizr.js来检测JS时会将类添加到HTML元素中，则可以避免这种情况，并且可以相应地修改基本样式，例如：

.alert-box {
  display: none;
}
.no-js .alert-box {
  display: block;
  /* Other styles */
}

我的解决方案使用localStorage，并依赖于存储选项作为字符串化对象：每个盒子存储的两个键是hidden（用于存储盒子的状态）和timestamp（用于存储时间）当盒子被解雇时）。这些可用于评估（1）用户是否已选择取消警报，以及（2）该操作是否在24小时内执行。

我对您的代码进行了一些修改：

1. 使用依赖于上下文的选择，这样您就不必为所有警报框声明多个类似的单击事件处理程序。这使代码更简单，更少冗余。
2. 使用https作为图片网址，以免混淆JSfiddle的HTTPS :)

工作代码如下所示，但由于安全限制，localStorage在此处不起作用：对于功能演示，refer to the updated JSfiddle instead。

$(function() {
  // Check for localStorage
  if (typeof window.localStorage !== typeof undefined) {
    // Loop through all alert boxes
    $('.alert-box').each(function() {
      var $t = $(this),
        key = $t.attr('id');

      // If key exists and it has not expired
      if (window.localStorage.getItem(key)) {
        var json = JSON.parse(window.localStorage.getItem(key));
        if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
          $t.hide();
        } else {
          $t.show();
        }
      } else {
        $t.show();
      }
    });
  }

  // Bind click events to alert boxes
  $('.alert-box a.alert-box-close').click(function() {
    var $alertBox = $(this).closest('.alert-box');

    // Hide box
    $alertBox.hide(800);

    // Store option in localStorage, using the box's ID as key
    if (typeof window.localStorage !== typeof undefined) {
      window.localStorage.setItem($alertBox.attr('id'), JSON.stringify({
        hide: true,
        timestamp: Date.now()
      }));
    }
  });

  // For demo purposes only, clear localStorage to ease testing
  $('#clear-localstorage').click(function() {
    window.localStorage.clear();
  });
});

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<button id="clear-localstorage">Clear local storage (for testing)</button>

Answer 9

您应该只使用本地存储空间。

<强> HTML

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<强> javascipt的

$(document).ready(function() {
  var nd = new Date();
  var md = nd;
  var newsclicked = false;
  var maintenanceclicked = false;
  setInterval(function() {
    newsclicked = (localStorage.getItem("newsclicked")) ? new Date(localStorage.getItem("newsclicked")) : false;
    maintenanceclicked = (localStorage.getItem("maintenanceclicked")) ? new Date(localStorage.getItem("maintenanceclicked")) : false;
    if (maintenanceclicked === false) {
      console.log(maintenanceclicked);
      $("#alert-box-maintenance").show(800);
    } else {
      var mddiff = (md.getTime() - maintenanceclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (mddiff >= 1) {
        $("#alert-box-maintenance").show(800);
      } else {
        $("#alert-box-maintenance").hide(800);
      }
    }
    if (newsclicked === false) {
      $("#alert-box-news").show(800);
    } else {
      var nddiff = (nd.getTime() - newsclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (nddiff >= 1) {
        $("#alert-box-news").show(800);
      } else {
        $("#alert-box-news").hide(800);
      }
    }
  }, 200);
  $("#close-alert-box-news").on("click", function() {
    nd = new Date();
    localStorage.setItem("newsclicked", nd);
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").on("click", function() {
    md = new Date();
    localStorage.setItem("maintenanceclicked", md);
    $("#alert-box-maintenance").hide(800);
  });
});

<强> CSS

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
#alert-box-news,#alert-box-maintenance{
  display:none; // by default have both elements hidden.
}

这是你的小提琴update来测试它的实际效果。关闭div

后刷新页面

Answer 10

您可以使用自己拥有的代码，并设置一个在24小时内过期的Cookie：

1. 安装MDN JavaScript Cookie Framework

2. 在你的js上设置一个tomorrow变量，其中包含你的cookie的截止日期：

   var today = new Date();
   var tomorrow = today.setHours(today.getHours() + 24);
   

3. 按如下方式设置Cookie：

   docCookies.setItem('hide_news', 'true', tomorrow);
   

4. 根据Cookie的值

   有条件地隐藏框

   if (docCookies.getItem('hide_news') == 'true'){
     $("#alert-box-news").add_class('hidden');
   };
   

5. 在CSS文件中定义hidden类

   .hidden {
     display none;
   }
   

您可以在this codepen中看到这一切。

Answer 11

使用24小时检查更新了脚本

存储时间戳的方式和位置更多地与您想要拥有的控件有关。

由于涉及到一个用户，我会采用服务器方式，并在用户数据库表中创建一个额外的字段，保存这些状态。

这样，在能够清除Cookie /存储空间的用户的反面， 你 控制哪些警报应该保持隐藏状态以及持续多长时间。

第二个优势是，这可以在时间基础上滚动，可以根据用户及其凭据采取某些行动。

无论哪种方式，我都会像这样构建show / hide，你可以在那里存储一个类或一个属性，即html标签，它控制一个盒子是否是可视的。

这样做的好处是，你摆脱了＆＃34;首先显示然后隐藏＆＃34;问题，它可以添加到服务器端或使用脚本。

这是一个使用脚本，简单javascript的简单示例，它绝不是优化的，它只是为了我想要显示的逻辑。

由于某些安全问题，这实际上不会作为 Stack代码段运行，所以这里有一个小提琴：https://jsfiddle.net/essjuj4y/10/

单击For this demo - to clear local storage按钮，将清除存储空间，当再次运行页面时，将显示这些框。

＆＃13;

＆＃13;

/*  add an event handler to be able to close a box  */
var alerts = document.querySelectorAll('.alert-box-close');
for (var i = 0; i < alerts.length; i++) {
  alerts[i].addEventListener('click', function(e) {
    var boxtype = e.target.parentElement.id.split('-').pop();
    document.getElementById('alert-box-' + boxtype).style.display = "none";
    localStorage.setItem("al-" + boxtype, new Date());
  })
}

/*  add an event handler to be able to clear storage - for demo purpose  */
document.querySelector('button').addEventListener('click', function(e) {
  localStorage.clear();
})

＆＃13;

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

.al-news #alert-box-news,
.al-maintenance #alert-box-maintenance {
  display: block;
}

＆＃13;

<html>
  <head>
    <script type='text/javascript'>
      function has24HourPassed(key) {
        var storeval = localStorage.getItem(key);
        if (!storeval) return true;    /*  nothing stored in storage  */
        var T24_HOUR = 24 * 60 * 60 * 1000;
        if ((new Date - new Date(storeval)) < T24_HOUR) return false;        
        localStorage.removeItem(key);  /*  24 hours passed so we can remove stored date  */
        return true;
      }
      (function(d) {
        if (has24HourPassed('al-news')) {
          d.classList.add('al-news');
        }
        if (has24HourPassed('al-maintenance')) {
          d.classList.add('al-maintenance');
        }
      })(document.documentElement);
    </script>
  </head>
  
  <body>
    <article class="alert-box" id="alert-box-news">
      <h1>News Alerts</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-news">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <article class="alert-box" id="alert-box-maintenance">
      <h1>Site Maintenance</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-maintenance">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <button>For this demo - to clear local storage</button>

  </body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 12

我的具体和lendi进程我建议您维护后端数据库（如sql，mysql等）表，可以简单地保存user_id，警告框显示或不创建这种类型的2列。

1）如果您的用户是注册用户，则使用用户ID或详细信息访问您的网站，您可以管理该警报框。

2）如果用户未注册该时间，则使用访问者的MAC ID。