Полностью удалить div, когда пользователь переходит обратно на веб-сайт

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я работаю над веб-сайтом, где, допустим, у нас есть index.html с 2 разделениями.

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

Идентификатор содержимого div имеет тег привязки. Когда я нажимаю на тег привязки,page.html загружается на той же вкладке. Теперь, когда я нажимаю кнопку «Назад» в браузере, я хочу, чтобы div с идентификатором не присутствовал.
На самом деле, я просто хочу, чтобы, когда кто-то посещает веб-сайт в первый раз, должна появиться верхняя часть div, а затем никогда не должна появляться снова, даже если кто-то переходит по ссылке и пытается вернуться. Хотя, когда кто-то снова открывает веб-сайт на новой вкладке, веб-сайт должен появиться снова (с верхним div и тем же самым снова). Возможно ли это?

1. Я думаю, вам следует выбрать решение на стороне сервера. Посмотрите на сеансы и файлы cookie и выберите тот, который подходит лучше всего.

2. Это возможно, но только путем выполнения некоторой формы управления сеансом (проще всего, установив cookie или токен localStorage при первом посещении и скрыв div при загрузке страницы, если этот cookie или токен присутствует). Это может быть javascript на стороне клиента, не обязательно задействовать сервер.

3. О, за исключением этой части: «Хотя, когда кто-то снова открывает веб-сайт на новой вкладке, веб-сайт должен появиться снова с верхним div» В этом случае ответ «нет», невозможно (вы не можете достоверно определить, попал ли пользователь на вашу страницу с помощью кнопки «Назад» или иным образом.)

Ответ №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 оно легко модифицируемо и ненадежно. Таким образом, опять же, вам действительно следует использовать решение на стороне сервера. Это есть, если вам это нужно.

1. Спасибо за код. Могу ли я уничтожить localStorage, когда пользователь обновляет веб-сайт или открывает его на новой вкладке? Я думаю, что это невозможно.

2. Нет, я не думаю, что можно определить, как кто-то покидает веб-страницу, но только когда. Извините.