使用 js and/or cookie 保存切换的 class 状态？

Question

我在我的网站底部固定了一个横幅，默认打开以显示重要信息，我还有一个按钮，如果用户已阅读通知并想隐藏它，可以将其关闭。

这是我的js：

$(document).ready(function(){
    const   noticeToggle = document.querySelector('.notice__toggle'),
            notice = document.querySelector('.notice')

    noticeToggle.addEventListener('click', _ => {
        noticeToggle.classList.toggle('notice__toggle--toggled');
        notice.classList.toggle('notice--toggled');
    })
});

有没有一种方法可以在用户访问网站时使用 js、cookie 或其他方式来保存此切换状态？目前它仅在浏览不同页面时默认打开（如预期）。

Answer 1

您可以使用 localStorage 存储标志以确定横幅的状态，如下所示：

document.addEventListener('DOMContentLoaded', () => {
  const noticeToggle = document.querySelector('.notice__toggle'),
    notice = document.querySelector('.notice')
    
  if (!!localStorage.getItem('bannerDismissed')) {
    notice.classList.add('notice--toggled'); // remove the banner
  }

  noticeToggle.addEventListener('click', _ => {
    noticeToggle.classList.toggle('notice__toggle--toggled');
    notice.classList.toggle('notice--toggled');
    localStorage.setItem('bannerDismissed', 'true');
  })
});

请注意，我删除了示例代码中对 jQuery 的依赖，因为它只用于文档加载事件处理程序。

Answer 2

只需像 localStorage.setItem('mySwithState', 'active') 一样保存您的开关状态并在页面加载时获取它 localStorage.getItem('mySwithState');

Answer 3

您可以为此使用 localStorage。

// write
window.localStorage.hasReadYourInfoBox = true;

// read
const hasReadInfoBox = !!window.localStorage.hasReadYourInfoBox

使用 js and/or cookie 保存切换的 class 状态？

Save toggled class state using js and/or cookies?

javascript

cookies

jquery

session-cookies