当用户导航回网站时完全删除 div答案

【问题标题】：Completely remove a div when user navigates back to the website当用户导航回网站时完全删除 div
【发布时间】：2014-07-04 04:59:31
【问题描述】：

我在一个网站上工作，假设我们有一个带有 2 个 div 的 index.html。

<div id="top">
    Some Content
</div>
<div id="content">
    Some Content
    <a href="page.html"></a>
</div>

内容 id div 有一个锚标记。当我单击锚标记时，page.html 会加载到同一个选项卡中。现在，当我按下浏览器的后退按钮时，我希望不存在带有 id 的 div。实际上，我只是希望当有人第一次访问该网站时，div top 应该出现，然后不应该再次出现，即使有人点击链接并试图返回。虽然，当有人再次在新选项卡中打开网站时，网站应该重新出现（顶部 div 和相同的东西再次出现）。有可能吗？

【问题讨论】：

我猜你应该选择服务器端解决方案。查看会话和 cookie，然后选择最适合的。
这是可能的，但只能通过某种形式的会话管理（最简单的方法是在首次访问时设置 cookie 或 localStorage 令牌，如果存在该 cookie 或令牌，则在页面加载时隐藏 div。）这可以是客户端 javascript，不必涉及服务器。
哦，除了这部分：“虽然，当有人再次在新标签页中打开网站时，网站应该以顶部div重新来过”，那么答案是否定的，不可能（您无法可靠地检测用户是否通过后退按钮或其他方式访问了您的页面。）

标签： javascript jquery html

【解决方案1】：

这可以通过 JavaScript 实现，但最好在服务器端完成。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script>
    var content, body;
    document.addEventListener("DOMContentLoaded", function() {
        content = document.getElementById("content");
        body = document.getElementsByTagName("body")[0];
        if (localStorage.getItem("wasHere") !== null) {
            body.removeChild(content);
        } else {
            localStorage.setItem("wasHere", "true");
        }
  });
  </script>
</head>
<body>
  <div id="top">
      Some Content
  </div>
  <div id="content">
      <!-- You need to put text inside links for them to show -->
      <a href="page.html">Some Content</a>
  </div>
</body>
</html>

这个解决方案的问题是localStorage 很容易修改并且不可靠。因此，同样，您应该真正使用服务器端解决方案。不过，如果您需要，它就在那里。

【讨论】：

感谢您的代码。当此人刷新网站或在新选项卡中打开它时，我可以销毁 localStorage 吗？我认为这是不可能的。
不，我认为无法感知如何某人离开网页，但只能感知何时。对不起。