使用localStorage进行页面间通信

izwell

于 2019-03-11 17:18:13 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： localStorage 页面间通信

本文链接：https://blog.youkuaiyun.com/MessageBox_/article/details/88398854

在HTML5中，localStorage的storage事件可用于页面间通信。在实际应用中，应注意只有同源页面能监听到其他页面通过setItem触发的事件，并且IE9-11存在兼容性问题，不支持对setItem方法的改造。为解决这个问题，建议避免直接修改setItem。可参考在线示例：PageMessageA.html和PageMessageB.html。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在h5中，新增了localStorage，对应localStorage的有一个storage事件，这个事件可以用来进行页面间进行通信。
页面间通信的列子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A</title>
</head>
<body>
<button>click2</button>
</body>
<script>
      document.querySelector('button').onclick = function(){
               localStorage.setItem('Num', Math.random()*10);
      }

      window.addEventListener("storage", function (e) {
         console.log(e)
        console.log(e.newValue)
        alert('来自其他页面的localstorage');
	  });

     	var orignalSetItem = localStorage.setItem;
	    localStorage.setItem = function(key,newValue){
	        var setItemEvent = new Event("setItemEvent");
	        setItemEvent.newValue = newValue;
	        window.dispatchEvent(setItemEvent);
	        alert('来自本页面的localstorage');

最低0.47元/天解锁文章