【前端新手之路-第一天】如何实现两个标签页中的通讯?
来源:互联网 发布:阿里巴巴软件开发 编辑:程序博客网 时间:2024/06/08 00:04
http://www.codesec.net/view/467836.html
如何避免打开同一个页面时,要多次登录。同页面,但是打开了两个。
在这篇文章中,我了解并复习到了。Cookie,sessionstorage,localstorage。认识如下:
cookie,兼容性很好,但是大概4kb.同时,cookie可以永久存在,也可以再回话结束后结束。要就关闭标签页回话立即结束时,不要用cookie,因为它还很有可能会存在一段时间,即使是session-cookie。
Sessionstorage:不支持跨标签页共享数据。比如,每次新开启一个标签页都要求用户重新登录。
Localstorage:此处作者用localstorage事件来解决这个问题。思路:当打开一个新的标签页的时候,先询问是否有sessionstorage。如果有,现有标签页通过localstorage事件向新页面传递sessionstorage,新页面获取后设置。
在标签页中有如下代码
(function()
{
If(!sessionStorage.length)
{//新打开的标签页,sessionStorage
localStorage.setItem("getsessionStorage",Date().now);
//触发storage事件,新旧页面都会监听
window.addEventListener("storage",add);
function add(event)
{
if(event.key=="getsessionStorage")
{
以下操作对已有页面
localStorage.setItem("sessionStorage",JSON.stringify(sessionStorage));
localStorage.removeItem("sessionStorage");
}
else if(event.key=="sessionStorage"&& !sessionStorage.length){
var data=JSON.parse(event.newValue);
for(varkey indata){
sessionStorage.setItem(key,data[key]);
}
}
}
;
}
})()
不同的标签页
方法一
第一个页面设置cookie
用document.cookie=”name=”+name;
第二个页面获得
function getCookie(key) {
return JSON.parse("{\""+document.cookie.replace(/;\s+/gim,",").replace(/=/gim,":")+"\"}");//g,全局 i忽略大小写 m多行搜索
}
setInterval(getCookie(key),1000);
方法二
利用localstorage设值传递。
localStorage.setItem(key,value);
- 【前端新手之路-第一天】如何实现两个标签页中的通讯?
- 学习前端第一天--认识标签
- 【前端新手之路-第2天】按需加载的含义及如何用js实现
- 新手第一天
- 新手的第一天
- 新手报到第一天
- 新手第一天
- 简述两个主机如何实现通讯
- 前端学习第一天
- 前端第一天
- 前端学习第一天
- 前端学习第一天
- 前端—第一天
- 20170919前端第一天
- 【前端攻城狮之路】html中的<meta>标签
- 【前端新手之路第五天】横向导航栏,html+css+js原生代码
- 博客第一天,新手报到
- joomla开发新手第一天
- mysql集群以及读写分离配置
- Java中删除数组中的一个元素
- Wkhtmltopdf Installation on Centos 7 Server
- 使用注解简化SSH框架
- jsoup API 中文版
- 【前端新手之路-第一天】如何实现两个标签页中的通讯?
- HDU_4022_Bombing
- 读深入理解Linux内核 (第8章 内存管理, 第三部分 --- 虚拟内存分配)
- SWIFT JSON
- 三种方法求解最大公约数
- 深入浅出RxJava四-在Android中使用响应式编程
- 二叉树的深度优先与广度优先
- Python-Image基本的图像处理操作
- Java中输入三个数 从小到大打印出来