如何在JavaScript中检测用户关闭HTML5桌面通知并阻止重复弹出

很简单，咱们只需要借助浏览器的localStorage来记录用户是否已经关闭过通知，这样刷新页面时就能判断要不要再次弹出了。

问题分析 #

你的原代码已经处理了通知权限的逻辑，但缺少对“用户关闭过通知”这个状态的记录，所以每次刷新都会重新触发通知流程。

修改后的完整代码 #

function notifyMe() {
  // 先检查用户是否已经关闭过通知，是的话直接退出
  if (localStorage.getItem('hasClosedNotification')) {
    return;
  }

  if (!("Notification" in window)) {
    alert("This browser does not support system notifications");
  } else if (Notification.permission === "granted") {
    notify();
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if (permission === "granted") {
        notify();
      }
    });
  }

  function notify() {
    var notification = new Notification('TITLE OF NOTIFICATION', {
      icon: 'http://carnes.cc/jsnuggets_avatar.jpg',
      body: "Hey! You are on notice!",
    });

    notification.onclick = function () {
      window.open("http://carnes.cc");
    };

    // 监听通知关闭事件，记录状态到localStorage
    notification.onclose = function() {
      localStorage.setItem('hasClosedNotification', 'true');
    };

    setTimeout(notification.close.bind(notification), 7000);
  }
}
notifyMe();

关键修改点说明 #

• 添加关闭状态检查：在函数最开始，通过localStorage.getItem('hasClosedNotification')判断用户是否关闭过通知，如果已经关闭，直接终止函数执行，不会再触发通知。
• 监听通知关闭事件：给notification添加onclose事件处理器，当用户手动关闭或者超时自动关闭时，都会把hasClosedNotification标记存入localStorage，这个标记会一直保存在浏览器里，除非用户清除浏览器缓存或者你主动清除这个键值。

如果之后需要让通知再次弹出（比如用户重新打开网站时重置状态），可以用localStorage.removeItem('hasClosedNotification')来清除这个标记。

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