Уведомления с кнопкой «Больше не показывать»

19 января 2023 Комментарии 0
HTML, JavaScript

<div id="alert" class="alert alert-info hide" style="overflow: hidden;">
  <p style="margin-bottom: 24px;">Уведомление, которое можно закрыть!</p>
  <button type="button" class="btn btn-info pull-right" data-dismiss="alert">
Больше не показывать</button>
</div>

Скрипт, который будет сохранять состояние в Local Strorage:

if (!localStorage.getItem('alert')) {
  $('#alert').removeClass('hide');
  $('#alert').on('closed.bs.alert', function() {
    localStorage.setItem('alert', 1);
  });
}

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере. Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ).
Он не имеет ограничений по времени хранения, может быть очищен пользователем вручную или браузером при переполнении автоматически (браузеры на основе движка WebKit, например Safari, очищают localStorage , если к нему не обращались в течение 7 дней). Максимальный объем данных ограничен размером 5MB.