原理:
localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信。
比如: 一个标签页发送消息(将发送的消息设置到localStorage中),一个标签页接收消息(从localStorage中获取消息)
利用 localStorage 方式实现的标签页通信优点?
相比cookie,容量大,能存储5M左右内容
发送请求时,不会默认携带,所以不会将所有内容发送到服务器。
利用storage事件,实时监听localStorage中的变化,无需再使用定时器
缺陷?
localStorage是H5新特性,兼容性没有cookie好
localStorage中的storage事件,只能监听非己页面的数据变化,而且不同浏览器中的localStorage的存储大小不一样,一般都是5M左右,IE是1M左右
例子:
01 发送消息的标签页(其实就是将要发送的消息设置到localStorage中)
<!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> <!-- 这个页面用来发送信息(设置localStorage的值) --> <input type="text" id='msg1'><br> <!--输入框 msg1 --> <input type="text" id='msg2'><br> <!--输入框 msg2 --> <button id="send">发送</button> <!-- 点击发送按钮触发send事件 --> <script> send.onclick=function(){ if(msg1.value.trim()!=='' && msg2.value.trim()!==''){ //如果msg1和msg2的内容不是空的,执行if语句 localStorage.setItem( 'msg1',msg1.value ) //将输入框msg1中的值,设置到localStorage中,并起名为msg1 localStorage.setItem( 'msg2',msg2.value ) //将输入框msg2中的值,设置到localStorage中,并起名为msg2 } } </script> </body> </html>
02 接收消息的标签页(其实就是从localStorage中获取消息并显示在页面)
<!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> <!-- 这个页面用来接收信息(获取localStorage的值 ) --> <h1>收到消息:<span id="recMsg1" ></span></h1> <h1>收到消息:<span id="recMsg2" ></span></h1> <script> // addEventListener 绑定事件监听 // storage事件,是localStorage特有的事件,只要localStorage中的内容发生改变就会触发该事件(非己页面才能触发) render() function render(){ recMsg1.innerHTML = localStorage.getItem('msg1')//获取localStorage中msg1的值 recMsg2.innerHTML = localStorage.getItem('msg2')//获取localStorage中msg2的值 } window.addEventListener('storage',()=>{ render() }) </script> </body> </html>