如何通过sessionStorage实现仅页面初始加载时触发指定事件？

嘿，我完全懂你的困扰！你之前的代码逻辑顺序出了问题，导致要么每次都触发动画，要么一次都不触发。咱们来一步步理清楚怎么搞定它：

问题出在哪？ #

你原来的代码是先把isNewSession设为true，再去检查它的值——这就意味着不管是第一次加载还是后续刷新，这个值都会是true，动画自然每次都跑。如果你反过来在检查后把它设为false，下次加载时又会先把它设回true，还是会触发，根本达不到你要的效果。

正确的实现思路 #

核心逻辑应该是：先检查是否已经执行过动画的标记，没有的话才执行动画，然后把标记存到sessionStorage里。这样第一次加载时标记不存在，动画执行，之后标记一直存在，就不会再触发了。

代码示例 #

用jQuery的话，正确的写法应该是这样：

$(function() {
  // 检查sessionStorage中是否有已执行动画的标记
  if (!sessionStorage.getItem('navbarAnimationRan')) {
    // 这里放你的导航栏动画代码
    console.log('执行导航栏动画');
    // 标记动画已执行，后续加载不再触发
    sessionStorage.setItem('navbarAnimationRan', 'true');
  }
});

为什么这样可行？ #

• sessionStorage是会话级存储：只要当前浏览器标签页不关闭，存储的内容就会一直保留。用户刷新页面、跳转到网站内其他页面再回来，这个标记都存在，动画不会重复触发。
• 每个标签页的sessionStorage是独立的：如果用户新开一个标签页访问你的网站，会重新触发一次动画，这通常是符合预期的（毕竟新会话嘛）。

补充说明 #

如果你想要的是用户在整个浏览器会话中（不管开多少标签页）只触发一次，那sessionStorage就不够用了，得用localStorage——不过看你的需求描述，应该是会话内（单个标签页）仅首次加载触发，所以sessionStorage刚好合适。

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