方法一:storage
事件
当同源页面的某个页面修改了localStorage
,其余的同源页面只要注册了storage
事件,就会触发。
该方法只能监听sessionStorage
或 localStorage
中值的变化,不能监听cookie中值的变化。
// localhost:8080/pageOne 页面
localStorage.setItem('calling', '55894')
// localhost:8080/pageTwo 页面
window.addEventListener('storage', event => {
if(event.key === 'calling') {
services.call(event.newValue)
}
})
event对象属性
属性名 | 作用 |
---|---|
domain | 发生变化的存储空间的域名 |
key | 设置或删除的键名 |
newValue | 如果是设置值,则是新值,如果是删除值,则是null |
oldValue | 键被修改之前的值 |
方法二:setItem
方法重写
在同一个页面中,对 localStorage
的 setItem
方法进行重写
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
localStorage.setItem("name","wang");