Question

我目前使用以下代码在5秒后隐藏页面上的特定元素。但是刷新页面时，该元素会再次弹出。

如何扩展代码，使其在生命周期内（或清除浏览器缓存时）被隐藏

代码：

<script type="text/javascript">
    setTimeout(function() {
  $('#data-popup-box-container').fadeOut('fast');
}, 5000);   
</script>

Answer 1

要使用终身隐藏元素，可以使用以下方法

隐藏弹出窗口时，设置一个Localstorage键
准备好文档后，检查是否存在Localstorage键，请直接删除元素

示例代码：

<script type="text/javascript">
    /* Your existing code + store entry in LocalStorage */
    setTimeout(function() {
        $('#data-popup-box-container').fadeOut('fast');

        // Add entry in localstorage that Popup displayed once :)
        localStorage.setItem("popupDisplayed", "yes");
    }, 5000);   

    /* On reload check if localstorage value is yes :) */
    $( document ).ready(function() {
        var popupDisplayed = localStorage.getItem("popupDisplayed");
        /* If local storage value is yes - remove element directly from dom */
        if(popupDisplayed && popupDisplayed == 'yes') {
           $('#data-popup-box-container').remove();
        }
    });

</script>

更新：：

根据他的评论中建议的@inetphantom，如果连接速度较慢，则永远不会显示弹出窗口。因此，您用于隐藏弹出窗口的代码应该是

     /* Check if all resource are loaded */
     $(window).load(function() {
        setTimeout(function() {
           $('#data-popup-box-container').fadeOut('fast');

           // Add entry in localstorage that Popup displayed once :)
           localStorage.setItem("popupDisplayed", "yes");
        }, 5000);
    });

详细了解窗口负载here

Answer 2

使用cookie和jQuery

<script type="text/javascript">
  if(!$.cookie("hide-popup-box-containe") {
    setTimeout(function() {
      $('#data-popup-box-container').fadeOut('fast');
    }, 5000); 
    $.cookie("hide-popup-box-containe",true);
  } else $('#data-popup-box-container').fadeOut('fast');
</script>

jQuery隐藏div弹出窗口以提供终身浏览器Cookie

2 个答案: