刷新后如何使元素不可见

Question

基本上我在我的网站上放了一个带有视频的灯箱，它显示在开头，你可以使用按钮或按 "Esc" 键跳过它，但我想要的是它只显示一次，我的意思是如果我在网站上进行刷新，或者如果我返回主页，我希望视频的 div 不再显示。

这是我尝试做的事情

 <article id="video_holder">
    <iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>
</article>

 <script>
 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         // Here I tried to remove the window forever
         $(this).remove();
     });          
 });
 </script>

有人知道我该如何实现吗？

Answer 1

正如其他人所建议的那样，正确的方法是使用 cookie。使用以下函数设置和读取cookie：

function read_video_cookie(){
        var name = "skip_video=";
        var all_cookies = document.cookie.split(';');

        for(var i = 0; i < all_cookies.length; i++){
            var c = all_cookies[i];
            while(c.charAt(0) == ' ')
                c = c.substring(1);
            if (c.indexOf(name) == 0)
                return JSON.parse(c.substring(name.length, c.length));
        }

        return false;
    }

    function set_video_cookie(){
        $skip_video = true;
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000)); // Cookie expires in 1 year
        var expires = "expires=" + d.toUTCString();
        document.cookie = "skip_video=" + "true" + "; " + expires + ";";
        $('.close_video').click(function(){
            $("#video_holder").fadeOut(500, function() {
                $(this).remove();
            });          
        });
    }

然后，在您的文档就绪函数中，检查 cookie 的值并在需要时插入视频元素：

var $skip_video;

        $(function(){
            $skip_video = read_video_cookie();

            if(!$skip_video){
                $("#video_holder").append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>');
            } else {

                $("#video_holder").fadeOut(500, function() {
                    $(this).remove();
                }); 

            }      
            set_video_cookie();     
        });

已更新：

此方法应该可以消除您正在处理的延迟。您还应该将标记更改为：

 <article id="video_holder"></article>

Answer 2

由于您已经在使用 jquery，因此有一个插件可以更轻松地获取和设置 cookie：

https://github.com/carhartl/jquery-cookie

要设置 cookie：

$.cookie('myCookie', 'value');

然后，获取cookie：

$.cookie('myCookie');

然后，在页面加载时，您可以显示您的视频（如果已设置）；这将要求您默认隐藏视频。使用内联样式（如果需要）：style="display:none":

然后，在文档准备就绪时，如果未设置 cookie，您应该显示它：

$( document ).ready(function() {
    if( !$.cookie('myCookie') ){
        $("#video_holder").show();
        $.cookie('myCookie', 'watched');
    }
}

此外，您可能希望将 vimeo URL 中的自动播放设置为 false。如果容器不可见，我不确定它的行为方式。

Answer 3

我建议 sessionStorage，它的作用类似于用户浏览器上的文档存储。所以你会这样做：

 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         sessionStorage.setItem('viewed_my_video', true);
         $(this).remove();
     });          
 });

我还鼓励您使用 javascript 渲染视频，而不是将其从 dom 中删除。这将允许你做类似的事情：

if(!sessionStorage.getItem('viewed_my_video')) {
  $('#video-holder').append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}

有更好的方法通过 javascript 渲染 html 但数字超出了这个问题的范围。（但如果你好奇结帐下划线/lodash/车把）。

正如其他人所建议的那样，cookies 是解决此问题的另一种方法。我更喜欢 sessionStorage 而不是 cookie，因为它比解析长字符串更容易使用。这是关于差异的一个很好的 Whosebug 答案：What is the difference between localStorage, sessionStorage, session and cookies?

刷新后如何使元素不可见

How can I make an element not visible after refresh

javascript

jquery

refresh

removeclass

已更新：