javascript - 永久隐藏 div 直到下次访问

Question

我有以下类为“fullscreen”的 div

<div class="fullscreen">
</div>

在该 div 中，有一个按钮，一旦单击，它将向下滚动到另一个 ID 为“#page”的 div。

问题是，一旦滚动到“fullscreen”并安定下来，如何永久隐藏类为“#page”的div？在再次访问该网站之前，它根本不会再次显示，即使离开该页面并返回该页面也是如此。

请在此处找到实际示例，因为它将阐明所有内容:http://loaistudio.com/anita/

按钮的HTML代码: <a href="#header">Find Out How</a>

JS:

//Smooth Scroll
   $('a').click(function(){
      $('html, body').animate({
         scrollTop: $( $(this).attr('href') ).offset().top
      }, 1500);
      return false;
   });

Answer 1

最终更新:我在下面概述了如何使用 cookie、localStorage 或服务器端 session 存储值。这就是我将如何使用您发布的代码实现这些解决方案:

 //Smooth Scroll
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 1500);
        /* We have animated, lets set the variable to never do this again */
        if(supports_storage()) localStorage['nofullscreen'] = true;
        return false;
    });

在上面，我们将 localStorage 变量(我将其命名为“nofullscreen”，可以随意替换为对您有意义的任何内容)设置为 true，因此我们知道用户已经看到了我们的全屏。现在，当页面加载时，我们要检查变量，并采取相应的行动:

 $( document ).ready(function() {
     if(localStorage['nofullscreen'] == 'true') $('.fullscreen').hide();
 });

如果存储变量存在且为“true”，这应该在页面加载时隐藏类为“全屏”的 div。

---

您需要在用户机器上存储一个 cookie 以了解他们过去访问过的内容。您可以使用基本的 Javascript 来做到这一点，如下所示:

document.cookie="nofullscreen=true";

上面的行将在本地存储中创建一个 cookie，在您滚动到#page 后运行它。

function doFullscreen(){
    var name = "nofullscreen=";
    var cookies = document.cookies.split(';');
    cookies.forEach(function(n){
        var c = cookies[i].trim();
        if(c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return false;
    });

上面的函数可以在页面加载时运行，如果用户以前来过这里，它会返回 True，你应该直接转到#page，如果是新用户，它会返回 false，你应该显示全屏 div。

更新:其他人建议使用 localStorage，这也是一个好主意。这是一个小例子。

检查兼容性:

function supports_storage(){
    try{
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

写入存储:

if(supports_storage()) localStorage['sitename.nofullscreen'] = true;

检查存储:

 if(localStorage['sitename.nofullscreen'] == "true"){
      //go right to #page
 }

更新 #2:PHP session 存储您在评论中解释说您也在使用 PHP。我觉得上述任何一种解决方案都可以正常工作，但为了完整性，我将在此处添加一些 PHP 代码。

首先，您需要开始 session :

 <?php session_start() ?>

您现在可以像这样使用 PHP 写入 session :

 <?php $_SESSION['nofullscreen']='true'; ?>

然后检查 session 变量是否稍后设置:

 <?php if($_SESSION['nofullscreen'] == 'true') { //print css rules to hide #fullscreen here? } ?>

如果需要清除session变量，可以使用unset:

 <?php unset($_SESSION['nofullscreen']) ?>

希望这对您有所帮助!