vue监听sessionstorage变化

// 使用 Vue 监听 sessionStorage 变化

// 定义一个方法来监听 sessionStorage 的变化
function listenSessionStorage() {
  // 创建一个 MutationObserver 实例，用于监听 sessionStorage 的变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      console.log('sessionStorage changed:', mutation);
      // 在这里可以触发 Vue 的响应式更新或者其他逻辑
    });
  });

  // 配置观察选项
  const config = { subtree: true, attributes: true };

  // 创建一个临时的 div 元素，用于挂载 MutationObserver
  const tempDiv = document.createElement('div');
  document.body.appendChild(tempDiv);

  // 开始观察
  observer.observe(tempDiv, config);

  // 每次修改 sessionStorage 时，手动触发一次 DOM 变化
  window.addEventListener('storage', () => {
    tempDiv.setAttribute('data-storage', Math.random());
  });
}

// 在 Vue 组件中使用
new Vue({
  el: '#app',
  data() {
    return {
      sessionStorageValue: ''
    };
  },
  created() {
    // 初始化时获取 sessionStorage 的值
    this.sessionStorageValue = sessionStorage.getItem('key') || '';

    // 监听 sessionStorage 变化
    listenSessionStorage();

    // 添加 storage 事件监听器，当 sessionStorage 发生变化时更新组件数据
    window.addEventListener('storage', () => {
      this.sessionStorageValue = sessionStorage.getItem('key') || '';
    });
  }
});

解释说明：

1. MutationObserver：我们使用 MutationObserver 来监听 DOM 的变化。虽然 MutationObserver 主要用于监听 DOM 变化，但我们可以通过创建一个临时的 DOM 元素，并在 sessionStorage 变化时触发它的属性变化，从而间接监听 sessionStorage 的变化。

2. storage 事件：浏览器提供了 storage 事件，当 localStorage 或 sessionStorage 发生变化时会触发该事件。我们可以在事件处理函数中更新 Vue 组件的数据。

3. Vue 组件：在 Vue 组件的 created 生命周期钩子中，我们初始化 sessionStorage 的值，并添加 storage 事件监听器，以便在 sessionStorage 变化时更新组件的状态。

4. 注意事项：MutationObserver 是一种间接的方法，主要用于跨浏览器兼容性。更推荐的方式是直接使用 storage 事件来监听 sessionStorage 的变化。