storage事件对localStorage 和 sessionStorage都有效
简单使用方法
let myEvent = new Event('xxx',{options}); // 定义,options 见MDN
DOM.addEventListener('xxx',function(e){ ... }) // 监听
DOM.dispatchEvent(myEvent ) // 触发
注意: 自定义事件可以在任何DOM元素触发,包括document和window,但是触发和监听的对象必须是同一个DOM元素
image.png
以下是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script type="text/x-template" id="myEvent">
<div>
<span id="" ref="dispatch" @click="clickHandle" style="border:1px solid">触发look</span>
<br>
<br>
<span @click="setStorage" style="border:1px solid">触发storage</span>
<br>
<br>
<span id="onMyEvent" ref="onMyEvent" style="border:1px solid">接收</span>
</div>
</script>
<script>
new Vue({
el: '#app',
template: '#myEvent',
created() {
/* =========本页面监听sorage事件开始========== */
// 创建自定义方法
// 自定义事件可以在任何DOm元素触发,包括document和window,但是触发和监听的对象必须是同一个DOM元素
var newSetItemEvent = new Event("setItemEvent");
// 缓存原来的方法
var orignalSetItem = localStorage.setItem;
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue)
})
// 重写原来的方法并监听
localStorage.setItem = function(key,newValue){
newSetItemEvent.newValue = newValue
window.dispatchEvent(newSetItemEvent)
// 使用原来的方法将数据存进storage
orignalSetItem.apply(this, arguments)
}
/* =========结束========== */
},
mounted() {
this.$refs.onMyEvent.addEventListener('look', function (e){
console.log('look事件接收到了---', e)
})
},
methods: {
clickHandle() {
const myLook = new Event("look");
myLook.newValue = "look----------"
this.$refs.onMyEvent.dispatchEvent(myLook)
// 自定义事件可以在任何DOm元素触发,包括document和window,但是触发和监听的对象必须是同一个DOM元素
},
setStorage() {
localStorage.setItem("nm","1234");
// sessionStorage.setItem("nm","1234");
}
}
})
</script>
</body>
</html>
