Question

我有一个可以使用下面的代码从视图中关闭的div。它工作正常，但我想做的只是显示div一次，以便如果访问者关闭div然后访问网站上的另一页（此时它再次出现）它不再出现，然后让访客不得不再次关闭它。）

有人可以帮忙指出这是可能的吗？（如果可能的话）如果访问者将来重新访问该网站，可能会显示div，但只是在访问者当前在网站上时显示div直到关闭。

<div class="fragment">
    <div class="fragment-inner">
        Get 5% off your orders
        <button id="closeButton">close</button>
    </div>
</div>
<script>
    document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    }, false); 
</script>

Answer 1

您可以使用https://github.com/etsy/statsd / sessionStorage来保持状态。

差异是当用户打开新标签页或关闭浏览器时，如果使用会话存储，状态将不会保留，而localStorage将保持状态，直到您更改值或清除它。

window.onload = function() {
    var fragment = document.getElementsByClassName('fragment')[0];
    document.getElementById('closeButton').addEventListener('click', function(e) {
        e.preventDefault();
        fragment.style.display = 'none';
        sessionStorage.setItem('close', 'close');
    }, false);

    if (sessionStorage.getItem('close') === 'close') {
        fragment.style.display = 'none';
    }
}

Answer 2

您可以执行类似

的操作

var btn = document.getElementById('closeButton');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    sessionStorage.setItem('fragment', 'hidden');
}, false);
if (sessionStorage.getItem('fragment') == 'hidden') {
    btn.parentNode.style.display = 'none';
}

演示：Fiddle

Answer 3

你可以为此设置一个cookie：

document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    // set cookie
    setCookie("closed","true", 100); 
}, false);

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;
}

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 "";
}

然后你可以在每个其他页面上调用getCookie（“closed”）函数来检查cookie是否已设置。

if(!getCookie('closed')){
   // call window again
}

Source

如何显示div直到只关闭一次

3 个答案: