Окно оповещения - Как сохранить close (x) в кэше браузера - PullRequest
Новая
       34

Окно оповещения - Как сохранить close (x) в кэше браузера

1 голос
/ 01 июля 2019

Здесь у меня есть простое окно предупреждения: 

/* The alert PROMO box */
.promobox {
  padding: 10px;
  background-color: #415ca2; /* Blue */
  color: white;
  margin-bottom: 7px;
}

/* The close button */
.closebtnpr {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}
<div class="promobox">
    <span class="closebtnpr" onclick="this.parentElement.style.display='none';">×</span>
    <center><b>U.S. POLO ASSN. DAY!</b></center>
</div>

Когда я нажимаю (x), тогда скрываю элемент. Но когда я обновляю страницу, снова появляется окно с предупреждением

Как я могу запомнить выбор закрытия окна предупреждения до тех пор, пока я не закончу просмотр сайта?

Update2: 

sessionStorage.setItem('myCat', 'Tom');

В следующем примере автоматически сохраняется содержимое текстового поля, и, если браузер случайно обновляется, восстанавливается содержимое текстового поля, так что запись не теряется. 

// Get the text field that we're going to track
let field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", function() {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});

1 Ответ

1 голос
/ 01 июля 2019

Вы почти получили его в своем последнем редактировании. Используйте sessionStorage (или localStorage, если вы хотите, чтобы ваши данные сохранялись). Вместо изменения атрибута отображения напрямую с помощью js используйте класс css и удалите его, если пользователь не отклонил его раньше. Используйте логическое значение для переменной sessionStorage.

Этот фрагмент кода не будет работать в среде песочницы 

document.addEventListener("DOMContentLoaded", function() {
   let dismissed = sessionStorage.getItem("dismissed");
   let alertDiv = document.getElementById("alert");
   let dismissButton = document.getElementById("dismiss");
   if(!dismissed){
     alertDiv.classList.remove("hide");
   }


  addEventListener("click", function(){
    alertDiv.classList.add("hide");
    sessionStorage.setItem("dismissed", true);
  });
});
.alert{border: 1px dashed lime; font-size: x-large; display: inline-block}
.hide{display: none}
<div class="alert hide" id="alert">
  SOME ANNOYING ALERT HERE!
  <button type="button" id="dismiss">X</button>
</div>
...