是否存在可存储依赖用户当前页面变量的钩子？

下面是几种适配不同场景的实现思路，直接套用就能解决你的需求：

1. 路由绑定变量（单页应用首选） #

如果是Vue、React这类单页应用，直接把变量和路由配置关联：

• 给对应页面路由添加自定义元信息：

  // Vue路由示例
  const routes = [
    {
      path: '/pageA',
      component: PageA,
      meta: { pageValue: 1 }
    },
    {
      path: '/pageB',
      component: PageB,
      meta: { pageValue: 2 }
    }
  ]
  

• 在需要使用的地方通过当前路由获取值：

  // Vue中获取
  const currentPageValue = this.$route.meta.pageValue
  

React可以用React Router的useLocation配合路由自定义属性实现，原理完全一致。

2. 全局状态管理（跨组件/页面共享） #

如果需要在多个组件或页面间同步这个值，用全局状态工具：

• 以Pinia为例（Vue生态）：

  import { defineStore } from 'pinia'
  export const usePageStore = defineStore('page', {
    state: () => ({
      currentPageValue: 0
    }),
    actions: {
      setPageValue(value) {
        this.currentPageValue = value
      }
    }
  })
  

• 在页面A的onMounted钩子调用setPageValue(1)，页面B调用setPageValue(2)，其他组件直接从store取值即可。React生态用Redux、Zustand的实现逻辑类似。

3. 本地存储（需持久化场景） #

如果要求页面刷新后变量值不丢失，用localStorage或sessionStorage：

• 页面加载时写入值：

  // 页面A加载时
  window.localStorage.setItem('pageValue', '1')
  // 页面B加载时
  window.localStorage.setItem('pageValue', '2')
  

• 使用时读取：

  const pageValue = parseInt(window.localStorage.getItem('pageValue'))
  

注：sessionStorage是会话级存储，关闭浏览器即清空；localStorage会长期保存。

4. URL参数（极简场景） #

如果不需要复杂逻辑，直接把值放在URL查询参数里：

• 页面A的URL设为xxx.com/pageA?value=1，页面B设为xxx.com/pageB?value=2
• 读取参数：

  const urlParams = new URLSearchParams(window.location.search)
  const pageValue = parseInt(urlParams.get('value'))
  

内容的提问来源于stack exchange，提问作者Karasuma Kenji