了解用于控制弹出窗口的 SessionStorage 和 LocalStorage

选择 sessionStorage 还是 localStorage 来管理网站弹出窗口，关键在于数据存储的持久性和弹出窗口的显示策略。

1. SessionStorage：会话级存储

数据生命周期： 数据仅在当前浏览器会话中有效。关闭标签页或浏览器后，数据将被清除。

适用场景： 适用于那些希望在每次新的浏览器会话中都重新显示的弹出窗口。

示例： 只在用户当前会话中显示欢迎信息，刷新页面或新标签页打开网站时不重复显示。

if (!sessionStorage.getItem('popupDisplayed')) {
  // 显示弹出窗口
  alert('欢迎访问我们的网站！');
  sessionStorage.setItem('popupDisplayed', 'true');
}

2. LocalStorage：本地存储

数据生命周期： 数据即使在浏览器关闭后仍然保留，直到用户手动清除或通过脚本删除。

适用场景： 适用于希望在多个会话中保持弹出窗口隐藏状态的情况。

示例： 每周只显示一次促销弹出窗口，或者用户关闭浏览器后不再显示。

if (!localStorage.getItem('popupDisplayed')) {
  // 显示弹出窗口
  alert('查看我们的特价优惠！');
  localStorage.setItem('popupDisplayed', 'true');
}

弹出窗口管理的关键区别：

选择标准：

• 短期弹出逻辑： 如果希望弹出窗口在新会话中再次出现，使用 sessionStorage。
• 长期弹出逻辑： 如果弹出逻辑需要在关闭浏览器或标签页后仍然有效，使用 localStorage。

对于更复杂的需求，可以结合使用这两种存储方式，例如，基于会话持续时间（例如，一周）。