Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
694 views
in Technique[技术] by (71.8m points)

vue如何监听sessionStorage

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

无法监听。

如果用 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,然后覆写它,但实际项目中并不推荐这么做,不利于维护。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...