不同页面之间可以通过localstorage保存响应式吗？

Question

A页面选择一些选项，B页面上有一个下拉框，下拉框的内容和A页面上选中的内容同步，这该怎么做？

这可以通过vue的响应式来实现吗？

Answer 1

VueUse - useLocalStorage

Answer 2

localstorage 的改变之后，可以通过 window addeventlistener 监听到。

这样就是 vuex 每次都存 storage，然后其他页面监听改变后读到 vuex 中。

---

但是这个体验好不好另说。。。

Answer 3

使用全局事件总线或 localStorage
除了 Vuex 和 provide/inject，你也可以通过 localStorage 存储选项，在页面之间共享状态。

Answer 4

(function(){
    //定义一个变量让setItem函数的值指向它
    let originalSetItem = localStorage.setItem;
    //重写setItem函数
    localStorage.setItem = function(key,newValue){
        //创建setItemEvent事件
        let event = new Event("setItemEvent");
        event.key = key;
        event.newValue = newValue;
        //提交setItemEvent事件
        window.dispatchEvent(event);
        //执行原setItem函数
        originalSetItem.apply(this,arguments);
    }
})();

//添加setItemEvent监听事件
window.addEventListener("setItemEvent", function (e) {
    //监听key为author的localstorage变化
    if(e.key ==='author'){
        let oldValue = localStorage.getItem("author")
        if(oldValue !== e.newValue){
            console.log('localStorage的author值发生改变,由' + 
                oldValue + '改变为' + e.newValue);
        }else{
            console.log('localStorage的author值' + e.newValue);
        }
    }
});

直接监听localStorage应该能实现你的需求

Answer 5

这种场景会不会直接将A页面的一些value通过传到B页面然后解析会不会好一点。
localStorage 只能在符合同源策略的页面中共享数据，这里可以根据业务需求看。

Answer 6

可以，但是不能直接存响应式的对象。得通过一些方式去自己来实现

• vueuse/packages/core/useStorage/index.ts at main · vueuse/vueuse

但其实这个需求已经在 VueUse 中实现了。 👉 useStorage | VueUse
你可以在浏览器中打开多个页签查看效果。