Storage事件在修改localStorage的当前标签页异常触发的问题

标准情况下，storage事件仅在同源的其他标签页/窗口修改localStorage时才会触发。若当前标签页也出现触发情况，可通过以下方式精准控制仅在其他标签页执行刷新：

实现步骤 #

1. 在修改localStorage的逻辑中添加页面级临时标记
   在你点击按钮修改token的代码里，用sessionStorage给当前页面加个仅自身可见的标记：

   // 点击按钮修改token的函数
   const updateToken = (newToken) => {
     // 标记当前页面是修改发起方
     sessionStorage.setItem('isCurrentPageUpdater', 'true');
     localStorage.setItem('token', newToken);
     // 延迟清除标记，确保storage事件触发时能读取到
     setTimeout(() => {
       sessionStorage.removeItem('isCurrentPageUpdater');
     }, 100);
   };
   

2. 改造storage事件处理器，跳过当前页面发起的修改
   在原监听逻辑中检查标记，若为当前页面发起的修改则跳过刷新：

   useEffect(() => {
     const onStorageValueChange = event => {
       const { key } = event;
       // 判断是否为当前页面发起的修改
       const isCurrentUpdater = sessionStorage.getItem('isCurrentPageUpdater') === 'true';
       if (key === 'token' && !isCurrentUpdater) {
         window.location.reload();
       }
     };
   
     window.addEventListener('storage', onStorageValueChange);
     return () => {
       window.removeEventListener('storage', onStorageValueChange);
     };
   }, []);
   

原理说明 #

• sessionStorage是页面隔离的，其他标签页无法读取当前页面的sessionStorage内容，因此标记仅对修改token的当前页面生效
• 延迟清除标记是为了保证storage事件触发时能读取到标记，避免因代码执行顺序问题导致判断失效

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