利用cookie实现浏览器中多个标签页之间的通信 |
您所在的位置：网站首页 › 利用cookie登录的前提条件是 › 利用cookie实现浏览器中多个标签页之间的通信 |
|
原理： cookie是浏览器端的存储容器，而且它是多页面共享的，利用cookie多页面共享的特性，可以实现多个标签页的通信。 比如： 一个标签页发送消息（将发送的消息设置到cookie中），一个标签页接收消息（从cookie中获取消息） 利用cookie+setinterval方式实现的标签页通信优点？ 优点：每个浏览器都兼容 缺点？ cookie有空间限制，每个浏览器在每个域名下最多能设置30-50个cookie，容量最多为4k左右。 因为cookie默认携带信息，每次http请求会把当前域名的所有cookie发送到服务器上，有用没用的全发过去，浪费网络宽带 使用setInterval的频繁设置刷新，使页面不断的重排重绘，过大的影响到了浏览器的性能。
例子： 01 发送消息的标签页（其实就是将要发送的消息设置到cookie中） DOCTYPE html> Document 发送 send.onclick=function(){ if(msg1.value.trim()!=='' && msg2.value.trim()!==''){ //如果msg1和msg2的内容不是空的，执行if语句 document.cookie='msg1='+msg1.value.trim(); // 将msg1和msg2的值放入cookie中（给cookie赋值） document.cookie='msg2='+msg2.value.trim(); // cookie 格式 msg=value } //因为cookie的值是多页面共享的，所以可以实现标签页的传值 }
02 接收消息的标签页（其实就是从cookie中获取消息并显示在页面） DOCTYPE html> Document 收到消息： 收到消息： // 获取cookie的方法 document.cookie // 01 将cookie中的值 msg1=hellwo; msg2=word 转变为 json字符串 格式 {"msg1":"hellwo","msg2":"word"} function getKey(key){ var obj='{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'","')+'"}' var cookies=JSON.parse(obj) // 02 将json字符串转为 对象 return cookies[key] } setInterval(() => {//加入定时器，让函数每一秒就调用一次，实现页面刷新 recMsg1.innerHTML=getKey("msg1")//将msg1的值设置到页面recMsg1处 recMsg2.innerHTML=getKey("msg2")//将msg2的值设置到页面recMsg2处 }, 1000);
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |