vue2 监听sessionStorage中值的变化

在Vue2中，可以使用`watch`来监听`sessionStorage`中值的变化。

例如，我们想要监听`sessionStorage`中`testKey`的变化：

new Vue({
  data: {
    testValue: sessionStorage.getItem('testKey')
  },
  watch: {
    testValue: function(newVal) {
      sessionStorage.setItem('testKey', newVal)
    }
  }
})

这样，当`testValue`的值发生变化时，会自动更新`sessionStorage`中`testKey`的值。反之，当`sessionStorage`中`testKey`的值发生变化时，也会自动更新`testValue`的值。

相关问题

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中值的变化了。