Question

我有<div>我有一个＆＃34; X＆＃34;关闭<div>但在刷新页面时再次显示。我希望<div>即使在刷新页面后仍然保持隐藏状态。我怎么能这样做？

我想在刷新页面时隐藏它们。

<div class="cookie">
    <a href="#" class="cookie-close">
    <span class="icon" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
    </a>
</div>

Answer 1

当用户点击x时，考虑将选项存储到localStorage中。

localStorage.setItem('showDiv', false)

希望这有助于......干杯

请考虑以下代码：

<body onload="onLoad()">
    <div id="myDiv" class="cookie" style="display: none">
        <a href="#" class="cookie-close">
        <span class="icon" onclick='onClose()'>X</span>
        </a>
    </div>

    <script>
        function onLoad() {
            var showDiv;
            if(localStorage.getItem("showDiv") == null) {
                showDiv = true;
            }
            else {
                showDiv = localStorage.getItem("showDiv")
            }

            if (showDiv) {
                 document.getElementById('myDiv').style.display = 'block';
            }
            else {
                document.getElementById('myDiv').remove();
            }
        }

        function onClose() {
            document.getElementById('myDiv').remove();
            localStorage.setItem("showDiv", false);
        }

    </script>
</body>

Answer 2

如果你希望每次加载页面时都隐藏div，就像@FunkDoc说的那样，并将display:none;添加到你的css中。如果您希望仅在首次加载页面时打开它，则必须在本地保存详细信息：

 // Retrieve
 if(localStorage.getItem("visited") == null){

    document.getElementsByClassName('cookie')[0].style.display = 'none';
 }

 // Store
 localStorage.setItem("visited", "true");

JS小提琴：https://jsfiddle.net/mb06490w/1/

Answer 3

你可以创建一个看起来像这样的脚本：

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)) {
    for i in 0 ..< JSON.count {

        autoreleasepool{
            count = count + 1
            if count >= percentage {
                progress = progress + 1
                //This notification executes the method that makes the update in the first view
                NSNotificationCenter.defaultCenter().postNotificationName("ProgressNotification", object: nil, userInfo: ["label":"Clientes", "progress" : progress])
                count = 0
            }
        }

    }
}

现在只在尚未设置cookie hideCookieMessage时显示它。一定要检查后端以及cookie，如果cookie存在，请不要发送。

Answer 4

添加Cookie有一些与创建，阅读和删除 Cookie相关的功能请找到此fiddle或以下代码段更多信息。

我希望它会帮助你......

function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            var expires = "; expires=" + date.toUTCString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        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,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

   $(function(){
 
      if(readCookie('CodefireOnce') == null)
      {
        $(".cookie").css("display","block");
      }
      $("body").on("click",".icon",function(){
        $(this).closest("div.cookie").remove();
        createCookie('CodefireOnce','true',7);
      });
    });

<div class="cookie" style="display:none;">
    <a href="#" class="cookie-close">
    <span class="icon">X</span>
    </a>
</div>

Answer 5

正如Jersh和Adrian Bratu所说，你可以使用localstorage存储div的状态（隐藏或不隐藏）。

但是，我建议改用cookie。

Cookie允许您拥有本地存储永久的截止日期。无论出于何种原因，如果您希望用户最终看到您的div中的更改，使用localstorage，您将必须清除它。

这意味着，要么为您的存储添加新数据（例如日期）。

使用cookie，当到期日期到期时，div将自动再次显示，您只需要设置一个新的过期日期到期的cookie。

实施非常相似：

document.cookie = "hidden=true; expires=Fri, 20 Jan 2017 23:59:59 GMT"

希望这对你有所帮助。

Answer 6

让它实际显示本地存储在这里或在jsfiddle中做你想要的是iffy。如果单击X，则会隐藏面板并将变量保存在localStorage上。然后，当页面加载时，您检查该变量的存在。我还添加了一个＆＃34; show＆＃34;按钮，以便您可以切换窗格。我在这里设置了一个测试页https://snowmonkey.000webhostapp.com/cookieThing.html

＆＃13;

$(document).ready(function(){
console.log("I've got "+localStorage.getItem("panelHidden"));
if(localStorage.getItem("panelHidden") == "true" ){
  $(".panel").hide();
} else {
  $(".panel-show-control").hide();
};

$(".panel-close-control").on("click", function(){
  // First, close the panel..
  $(".panel").hide();
  $(".panel-show-control").show();
  // then, set a cookie.
  localStorage.setItem("panelHidden", "true");
});

$(".panel-show-control").on("click", function(){
  // hide the button...
  $(this).hide();
  $(".panel").show();
  
  // then, unset the cookie!
  localStorage.setItem("panelHidden", "false");
});
  });

＆＃13;

.panel-close-control {
  border: 1px solid black;
  background-color: #ccc;
  font-family: Arial, sans-serif;
  font-size: 9px;
  float: right;
}
.panel {
  border: 1px dotted red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <span class="icon panel-close-control">X</span>
  <div class="pane-contents">
    <p>A designer can use default text to simulate what text would look like. Humans are creative beings. However, standard default text can do the trick. Your design looks awesome by the way. I hope you enjoyed the fake text. It looks even better with you
      using this text. Using default text is a simple way to create the appearance of content without having to create it. If it is not real text, they will focus on the design. This text will not appear in a consistent order. However, standard default
      text can do the trick.</p>
  </div>
</div>
<button class="panel-show-control">
Show the panel
</button>

＆＃13;

刷新页面时隐藏div

6 个答案: