如何利用Local Storage实现弹窗每30天仅显示一次

我的网站上有个新闻通讯弹窗，现在用户每次切换页面都会弹出，我想让这个弹窗对每位用户每30天只显示一次，打算用LocalStorage来实现，但我对LocalStorage操作不太熟，希望有人讲讲具体方法。以下是我写的初始代码：

var newsletterPopup = localStorage.getItem('newsletter');

if (newsletterPopup) {

}

localStorage.setItem('newsletter','true');

实现思路和修改方案 #

你当前的代码只是简单存了一个true标记，没法判断时间间隔，得改成存储弹窗最后一次显示的时间戳，通过对比当前时间和存储的时间，来决定是否显示弹窗。

具体逻辑：

• 读取LocalStorage里的弹窗最后显示时间
• 计算当前时间与存储时间的差值，判断是否超过30天（30天对应的毫秒数是 30 * 24 * 60 * 60 * 1000）
• 如果没存储过时间，或者时间差超过30天，就显示弹窗并更新存储的时间；否则不显示

修改后的完整代码 #

// 定义30天对应的毫秒数
const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
// 获取LocalStorage中存储的最后一次弹窗时间
const lastShown = localStorage.getItem('newsletterLastShown');
// 获取当前时间戳
const now = Date.now();

// 判断是否需要显示弹窗：要么没存过时间，要么距离上次显示已经超过30天
if (!lastShown || (now - parseInt(lastShown)) > THIRTY_DAYS) {
  // 这里写显示弹窗的代码，比如：
  // document.querySelector('.newsletter-popup').style.display = 'block';
  
  // 更新LocalStorage，存入当前时间戳
  localStorage.setItem('newsletterLastShown', now.toString());
}

代码说明 #

1. THIRTY_DAYS：把30天转换成毫秒数，方便和时间戳做差值计算
2. lastShown：从LocalStorage读取之前存储的时间戳（用户第一次访问时为null）
3. 时间判断逻辑：
   • 若lastShown不存在（首次访问），直接显示弹窗
   • 若当前时间减去上次显示时间的差值大于30天的毫秒数，说明已过30天，显示弹窗
4. 存储时间戳：弹窗显示后，把当前时间戳存入LocalStorage，下次访问时就能做时间对比

这样就能实现每30天给用户仅显示一次弹窗的效果，切换页面时只会判断时间，不会重复弹出。

内容的提问来源于stack exchange，提问作者user18791202