Блог

Главная - Вопросы по программированию - После переключения класса, как мне сделать так, чтобы этот эффект оставался в браузере пользователя навсегда?

После переключения класса, как мне сделать так, чтобы этот эффект оставался в браузере пользователя навсегда?

#javascript

#javascript

Вопрос:

Всякий раз, когда пользователь в браузере нажимает на closeBtn. Как мне сделать так, чтобы эффект оставался навсегда на его веб-сайте, пока он не изменит свой IP-адрес или браузер? Я хочу, чтобы класс none не отображался в его представлении постоянно.

  let cookiebox = document.getElementById('cookie-box');
  let closeBtn = document.getElementById('close-btn');

  closeBtn.addEventListener("click", () => {
    cookiebox.classList.toggle("none")
  })

Комментарии:

1. Вы имеете в виду, что не хотите none , чтобы он исчезал, когда пользователь нажимает на него снова? Если это так, вы могли бы использовать cookiebox.classList.add("none");

2. Сохраните информацию, на которую они уже нажали, в файле cookie или localStorage, чтобы вы могли прочитать ее оттуда. Затем прочитайте эту информацию, когда страница загрузится, и спрячьте поле, когда это применимо.

3. После нажатия closeBtn он скрывает всплывающее окно. Я хочу, чтобы всплывающее окно больше никогда не появлялось.

4. Как мне сохранить это в локальном хранилище?

5. Вы можете использовать Window.localStorage для сохранения и загрузки из локального хранилища. вы можете прочитать эту ссылку

Ответ №1:

Я бы предложил сохранить закрытый флаг sessionStorage . Данные в sessionStorage очищаются при завершении сеанса страницы…

  • Сеанс страницы длится до тех пор, пока открыт браузер, и сохраняется при перезагрузке и восстановлении страницы.
  • Открытие страницы на новой вкладке или в окне создает новый сеанс со значением контекста просмотра верхнего уровня, который отличается от того, как работают сеансовые файлы cookie.
  • Открытие нескольких вкладок / окон с одним и тем же URL-адресом создает хранилище сеансов для каждой вкладки / окна.
  • Закрытие вкладки / окна завершает сеанс и очищает объекты в sessionStorage.

Подробнее о хранилище сеансов можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Грубым примером такой реализации может быть:

 let cookiebox = document.getElementById('cookie-box');
let closeBtn = document.getElementById('close-btn');

function closeCookieBox() {
    cookiebox.classList.add("none");
}

if (sessionStorage.getItem("closed_cookie_box")) {
    closeCookieBox();
}

closeBtn.addEventListener("click", () => {
    closeCookieBox();
    sessionStorage.setItem("closed_cookie_box", true);
});

Комментарии:

1. Спасибо. Это то, что мне было нужно