javascript - 使用 js 和/或 cookie 保存切换的类状态？

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、cookies 或其他东西来保存此切换的状态？目前，它仅在浏览不同页面时默认打开(如预期)。

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 的依赖，因为它仅用于文档加载事件处理程序。