vue监听localstorage值变化

本当迷

2022 年 09 月 27 日

283 次浏览

暂无评论

1289字数

vue

## 在vue中实现监听localstorage中某个键对应的值的变化

在[根目录]下创建一个名为utils的文件夹,在文件夹中创建一个tool.js文件

![](https://www.bdmcom.cn/usr/uploads/2022/09/4045409434.png)

```javascript
//****将这段内容放在tool.js文件中****
// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
function dispatchEventStroage() {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function(key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage;

```

在main.js中引入使用

```javascript
import tool from "./utils/tool";
Vue.use(tool);

```

在需要监听localstorage中数据变化的文件中加以下代码

```javascript
//解决this指向问题，在window.addEventListener中this是指向window的。
//需要将vue实例赋值给_this,这样在window.addEventListener中通过_this可以为vue实例上data中的变量赋值
let _this=this;
//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
	//e.key : 是值发生变化的key
	//例如 e.key==="token";
	//e.newValue : 是可以对应的新值
	if(e.key==="token"){
		console.log(e.newValue);
		_this.token=e.newValue;
	}
})

```

到这里就可以在localstorage中token的值变化时在控制台输出新的值了 , 此方法只能监听到setItem事件.

### 注意：

如果我们localstorage中存的是对象，需要进行字符串转对象：`JSON.parse(字符串)`

最后修改：2022 年 09 月 27 日