vue如何监听sessionStorage

Question

我在public文件夹里面的js文件里用sessionStorage存储了一个参数，想在vue页面里监听这个参数变化，请问怎么监听？

Answer 1

无法监听。

如果用 setInterval 轮询的话有点儿二，并且性能有极大问题。

但你可以封装一层，不要直接 sessionStorage.setItem，而是对外提供一个方法来执行写入，并向外广播。

let eventbus = new EventBus(); // 伪代码，这里你引用任何一个 EventBus 库都可以，Vue2 本身自己就自带一个

function setSessionStorage(key, newVal) {
    // 先取旧值，如果你不需要也可以不取
    let oldVal = sessionStorage.getItem(key);
    // 赋新值
    sessionStorage.setItem(key, val);
    // 伪代码，广播
    eventbus.emit('sessionStorageChanged', {
        key: key,
        oldValue: oldVal,
        newValue: newVal
    });
};

// 伪代码，监听广播
eventbus.on('sessionStorageChanged', function(e) {
    console.log(e.key, e.oldValue, e.newValue);
});

// 调用
setSessionStorage('mykey', 'myval');

P.S. 当然你也可以拷贝一份旧的 sessionStorage.setItem，然后覆写它，但实际项目中并不推荐这么做，不利于维护。

Answer 2

mounted() {
    window.addEventListener("storage", function (e) {
        if (e.storageArea === sessionStorage) {
            alert("change");
        }
    });
}