vue3 中 localStorage 在A页面设置值，值在B页面正常显示？

A页面：

<div>
    <button @click=setData()> 设置localStorage 本地存储值 </button>
<div>

// A页面
setup () {
    const setData = () => {
      localStorage.set_name = 'maJon'
      localStorage.set_sex = '男'
    }
    return {
      setData,
    }
  },

B 页面：

<div>
    姓名：{{ isName.value }}
</div>
<div>
    性别：{{ isSex.value }}
</div>

setup () {
    const isName =ref('默认值');
    const isSex =ref('默认值')
    return {
      isName,
      isSex
    }
  },

created() {
    this.localStorageData()
},
methods:{
    localStorageData(){        // 获取A页面设置的值        
        setTimeout(() => {        // 此处重点！延时获取，异步获取，否则展示会无值，或是总是默认值。
            this.isName = localStorage.set_name
            this.isSex = localStorage.set_sex
            }, 1);    // 1毫秒，此处可任意设置
    }
}