通知提示怎么实现手动关闭后不再自动弹出？

誉馨 Dev 提问于 2026-03-07 15:44:20 阅读 4

交互

我在用 Vue 做一个系统通知，现在每次页面加载都会弹出提示，但用户点“×”关闭后刷新页面又出现了。我试过用 localStorage 记录状态，但好像没生效。

这是我的关闭逻辑：

const closeNotice = () => {
  showNotice.value = false;
  localStorage.setItem('noticeClosed', 'true');
};

然后在 onMounted 里读取：

onMounted(() => {
  const closed = localStorage.getItem('noticeClosed');
  if (closed !== 'true') {
    showNotice.value = true;
  }
});

可每次刷新还是显示，是不是哪里漏了？

手动关闭

我来解答赞 2 收藏

反馈

1 条解答

春豪 Lv1

你这代码逻辑本身没啥问题，问题可能出在 localStorage 的存取时机上。先检查下这几个点：

1. 确保 localStorage 真的存进去了，打开开发者工具看看 Application 面板里的 localStorage 里有没有 noticeClosed 这个 key

2. 检查 onMounted 的执行顺序，确保在读取之前已经执行过存储。可以加个 console.log 调试下：

onMounted(() => {

  console.log('读取', localStorage.getItem('noticeClosed'));

  // 其他代码

});



const closeNotice = () => {

  console.log('存储', 'true');

  // 其他代码

};

3. 有时候可能是字符串比较的问题，保险起见可以改成这样：

if (closed !== null) {

  showNotice.value = false;

} else {

  showNotice.value = true;

}

如果还不行，可能是 localStorage 被限制或者被清除了，可以考虑用 cookie 替代，或者让服务端配合记一下用户关闭状态。不过从你的代码看，问题大概率出在前两点。

2026-03-07 16:00