storage事件對localStorage 和 sessionStorage都有效
簡單使用方法
let myEvent = new Event('xxx',{options}); // 定義,options 見MDN
DOM.addEventListener('xxx',function(e){ ... }) // 監(jiān)聽
DOM.dispatchEvent(myEvent ) // 觸發(fā)
注意: 自定義事件可以在任何DOM元素觸發(fā),包括document和window,但是觸發(fā)和監(jiān)聽的對象必須是同一個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">觸發(fā)look</span>
<br>
<br>
<span @click="setStorage" style="border:1px solid">觸發(fā)storage</span>
<br>
<br>
<span id="onMyEvent" ref="onMyEvent" style="border:1px solid">接收</span>
</div>
</script>
<script>
new Vue({
el: '#app',
template: '#myEvent',
created() {
/* =========本頁面監(jiān)聽sorage事件開始========== */
// 創(chuàng)建自定義方法
// 自定義事件可以在任何DOm元素觸發(fā),包括document和window,但是觸發(fā)和監(jiān)聽的對象必須是同一個DOM元素
var newSetItemEvent = new Event("setItemEvent");
// 緩存原來的方法
var orignalSetItem = localStorage.setItem;
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue)
})
// 重寫原來的方法并監(jiān)聽
localStorage.setItem = function(key,newValue){
newSetItemEvent.newValue = newValue
window.dispatchEvent(newSetItemEvent)
// 使用原來的方法將數(shù)據(jù)存進storage
orignalSetItem.apply(this, arguments)
}
/* =========結(jié)束========== */
},
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元素觸發(fā),包括document和window,但是觸發(fā)和監(jiān)聽的對象必須是同一個DOM元素
},
setStorage() {
localStorage.setItem("nm","1234");
// sessionStorage.setItem("nm","1234");
}
}
})
</script>
</body>
</html>
