监听sessionStorage中值的变化

要监听sessionStorage中值的变化，可以使用`window.addEventListener`方法，监听`storage`事件。当sessionStorage中的值发生变化时，该事件会被触发。在事件处理程序中，可以使用`event.key`属性获取发生变化的键值，使用`event.newValue`属性获取更新后的值。

以下是一个示例代码：

window.addEventListener('storage', function(event) {
   if (event.storageArea === sessionStorage) {
       console.log('sessionStorage中的值发生了变化');
       console.log('键名：' + event.key);
       console.log('新的值：' + event.newValue);
   }
});

注意，该方法只能监听同一域名下的其他窗口或标签页对sessionStorage的修改。如果在不同域名下，或者在同一域名下但是使用了不同的协议（例如http和https），则无法监听到sessionStorage的变化。

相关问题

vue3.2监听sessionStorage中值的变化

在 Vue 3.2 中，你可以使用`watchEffect`函数来监听`sessionStorage`中值的变化。具体步骤如下：

1. 在组件中导入`watchEffect`函数：`import { watchEffect } from 'vue'`
2. 在`setup`函数中使用`watchEffect`监听`sessionStorage`中值的变化：

setup() {
  watchEffect(() => {
    const value = sessionStorage.getItem('key')
    // do something with the value
  })
}

3. 如果你需要在组件销毁时停止监听，可以将`watchEffect`返回的函数存储起来，在`onUnmounted`钩子函数中调用。例如：

setup() {
  const stopWatching = watchEffect(() => {
    const value = sessionStorage.getItem('key')
    // do something with the value
  })

  onUnmounted(stopWatching)
}

这样，当组件销毁时，`stopWatching`函数就会被调用，停止监听`sessionStorage`中值的变化。

vue2 侧边栏 监听sessionStorage中值的变化

要监听sessionStorage中值的变化，可以使用Vue的watch属性。具体步骤如下：

1. 在Vue实例中创建一个data属性，用来存储sessionStorage中的值。

2. 在created生命周期钩子中，将sessionStorage中的值赋给data属性。

3. 使用watch属性监听data属性的变化，当data属性发生变化时，执行相应的操作。

代码示例：

<template>
  <div>
    <!-- 侧边栏组件 -->
    <sidebar :isOpen="isOpen" />
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue'

export default {
  components: {
    Sidebar
  },
  data () {
    return {
      isOpen: false // 侧边栏是否打开
    }
  },
  created () {
    // 从sessionStorage中获取isOpen的值
    const isOpen = sessionStorage.getItem('isOpen')
    if (isOpen) {
      this.isOpen = JSON.parse(isOpen)
    }
  },
  watch: {
    // 监听isOpen属性的变化
    isOpen (val) {
      // 将isOpen的值存储到sessionStorage中
      sessionStorage.setItem('isOpen', JSON.stringify(val))
    }
  }
}
</script>

在上面的代码中，我们创建了一个名为isOpen的data属性，用来保存侧边栏是否打开的状态。在created钩子中，我们从sessionStorage中获取isOpen的值，并将其赋给data属性。然后，我们使用Vue的watch属性监听isOpen属性的变化，当isOpen属性发生变化时，将其存储到sessionStorage中。这样，我们就可以实现监听sessionStorage中值的变化了。