web开发技巧-同域名下跨界面通信-storage事件
假设这么一个场景,同域名下的两个界面,A界面在修改了部分值后需要B界面进行同步更新,此时就可以用到storage事件。
A界面代码:
<input type="text" name="" id="input">
<script>
document.getElementById('input').onblur = function () {
localStorage.setItem('input', JSON.stringify(this.value))
}
</script>
B界面代码:
<input type="text" name="" id="input">
<script>
window.addEventListener('storage', function(event) {
document.getElementById('input').value = JSON.parse(event.newValue);
})
</script>
现在开始测试:
界面A输入666
界面B就会触发事件:
ok,完成!