如何实现confetti效果仅为单个用户加载一次，刷新跳转页面不再触发

实现思路 #

• 借助浏览器localStorage持久化存储彩屑效果的展示标记，数据不会随页面刷新、切换甚至浏览器关闭丢失
• 页面加载时优先校验标记是否存在，仅当用户从未触发过当前彩屑效果时才执行播放逻辑
• 效果触发后写入已展示标记，后续所有访问都会跳过效果执行

完整实现代码 #

<script src="https://www.wpromotions.eu/confetti.min.js"></script>
<script>
// 仅当未展示过彩屑效果时执行逻辑
if (!localStorage.getItem('confettiShown')) {
  confetti.start()
  // 6秒后停止彩屑效果
  setTimeout(() => {
    confetti.stop()
    // 标记已展示，后续访问不再触发
    localStorage.setItem('confettiShown', 'true')
  }, 6000)
}
</script>

可选调整说明 #

• 若需要即使用户在彩屑播放中途刷新也不会二次触发，可以将localStorage.setItem('confettiShown', 'true')移到confetti.start()之后立即执行，无需等待播放结束
• 若需要效果仅在当前浏览器会话内仅触发一次（关闭浏览器后下次打开可重新触发），将localStorage替换为sessionStorage即可
• 需要重置触发状态时，执行localStorage.removeItem('confettiShown')清除对应存储标记即可

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