使用localStorage进行页面间通信

利用localStorage实现页面间通信

最新推荐文章于 2022-02-28 16:02:57 发布

原创

最新推荐文章于 2022-02-28 16:02:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#localStorage #页面间通信

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

在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');
	        orignalSetItem.apply(this,arguments);
	    }
	    window.addEventListener("setItemEvent", function (e) {