localStorage同页面监听不到的最优解

51 阅读1分钟

直接重写原生事件

const localStorageProxy = new Proxy(localStorage, {
  set(target, prop, value) {
    const oldValue = target.getItem(prop);
    target.setItem(prop, value);
    
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('localStorageChanged', {
      detail: { key: prop, oldValue, newValue: value }
    }));
    return true;
  },
  deleteProperty(target, prop) {
    const oldValue = target.getItem(prop);
    target.removeItem(prop);
    
    window.dispatchEvent(new CustomEvent('localStorageChanged', {
      detail: { key: prop, oldValue, newValue: null }
    }));
    return true;
  }
});

// 替换原生localStorage
Object.defineProperty(window, 'localStorage', { value: localStorageProxy });

// 监听变化
window.addEventListener('localStorageChanged', (e) => {
  if (e.detail.key === 'yourKey') {
    console.log('变化:', e.detail);
  }
});