【4858美高梅】js页面间通讯方法,浏览器页面间通讯方法

By admin in 4858美高梅 on 2019年4月25日

  在写页面包车型客车时候偶然会碰到这么的急需,必要五个页面之间传递数据只怕多个事件。这年,就须求用到自身后天所要讲的storage事件,学习这么些事件在此之前,需求先驾驭localStorage的用法。具体用法能够查阅别的文书档案。出发storage事件的尺码如下:

  在写页面包车型大巴时候偶然会跨越这么的要求,须求八个页面之间传递数据可能一个风浪。这一年,就必要用到自家今日所要讲的storage事件,学习那些事件在此以前,要求先掌握localStorage的用法。具体用法能够查阅别的文书档案。出发storage事件的尺码如下:

localStorage
就算浏览器关闭了,数据也会被保留下去并可用于具有来自同源(同样域名、协谈判端口)窗口的加载。

html5中的Web
Storage包含了二种存款和储蓄模式:sessionStoragelocalStorage。都是用来积攒客户端一时半刻消息的对象.他们均只可以存款和储蓄字符串类型的对象(尽管正规中得以积攒其余原生类型的目的,但是近日甘休未有浏览器对其开始展览落到实处)。

  1. 同3个浏览器展开了四个同源的页面
  2. 多少个网页中修改localStorage
  3. 另一网页注册了storage事件
  1. 同叁个浏览器展开了多个同源的页面
  2. 三个网页中期维修改localStorage
  3. 另一网页注册了storage事件

sessionStorage
数据存款和储蓄在窗口对象中,对于别的窗口或标签不可知,并且当窗口关闭时,数据丢失。


  storage事件,只有在同源页面下,才有意义,区别源是未有功能的。那么怎么着是同源呢?

  storage事件,唯有在同源页面下,才有功力,不一致源是未有效益的。那么哪些是同源呢?

sessionStorage常用于前后端分离用来记录报到状态。

sessionStorage:用于地点存款和储蓄贰个对话(session)中的数据,那个多少唯有在同五个会话中的页面本事访问,并且当会话停止后数据也随着销毁。由此sessionStorage不是壹种持久化的地点存储,仅仅是会话级其他蕴藏。

  U猎豹CS陆L由和睦、域名、端口和路径组成,假诺多个U中华VL的协商、域名和端口一样,则代表他们同源。举个栗子:

  UWranglerL由协调、域名、端口和路线组成,如若八个U瑞鹰L的协商、域名和端口同样,则意味着他们同源。举个栗子:

两种web storage的用法一样

localStorage:用于持久化的本地存储,除非主动删除数据,不然数据是长久不会晚点的。

1 http://www.wszdaodao.cn/demo/index.html
2 //这个网址,协议是http://域名是www.wszdaodao.cn,端口是80(默认端口可以省略)
3 
4 //对比URL:
5 http://www.wszdaodao.cn/demo2/other.html     //同源
6 http://www.wszdaodao.cn:81/demo/index.html   //不同源
7 http://sxh.wszdaodao.cn/demo/index.html      //不同源
8 http://www.mamama.cn/demo/index.html         //不同源
1 http://www.wszdaodao.cn/demo/index.html
2 //这个网址,协议是http://域名是www.wszdaodao.cn,端口是80(默认端口可以省略)
3 
4 //对比URL:
5 http://www.wszdaodao.cn/demo2/other.html     //同源
6 http://www.wszdaodao.cn:81/demo/index.html   //不同源
7 http://sxh.wszdaodao.cn/demo/index.html      //不同源
8 http://www.mamama.cn/demo/index.html         //不同源

4858美高梅 1

不等浏览器不能够共享localStorage【4858美高梅】js页面间通讯方法,浏览器页面间通讯方法。或sessionStorage中的音讯。一样浏览器的例外页面间能够共享一样的localStorage(页面属于同一域名和端口),然则分歧页面或标签页间不可能共享sessionStorage的新闻。那里供给注意的是,页面及标签页仅指一流窗口,倘诺1个标签页包罗四个iframe标签且他们属于同源页面,那么他们中间是足以共享essionStorage的。

  所以在测试时候,一定要确定保证是同源页面。

  所以在测试时候,一定要保管是同源页面。

setItem 和GetItem

同源的决断规则:

  上面是两页面间交互代码,落成相当简单,pageA与pageB之间通讯。

  下边是两页面间交互代码,达成非凡轻巧,pageA与pageB之间通信。

什么利用localStorage跨页面通讯呢,举例有如此三个供给,

  • http://www.test.com
  • https://www.test.com
    (分裂源,因为协议分裂)
  • http://my.test.com(差异源,因为主机名不一样)
  • http://www.test.com:8080(分歧源,因为端口分歧)

page A :
设置localStorage

page A :
设置localStorage

用户登入后台,开启了成都百货上千tab页面。然后因为某种原因被踢下线,当前以此tab将要剥离到登入页面,同时其它页面也意在能脱离不再显得。

web storage和cookie的区别

Web Storage 的概念和 cookie
相似,差异是它是为着更加大体量存款和储蓄设计的。Cookie
的大大小小是受限的,并且每趟你请求3个新的页面包车型客车时候 Cookie
都会被发送过去,那样平空浪费了带宽,此外 Cookie
还亟需钦点功用域,不可能跨域调用。

4858美高梅,除外,Web
Storage
拥有setItem,getItem,removeItem,clear等方式,不像cookie需求前端开辟者自个儿包裹setCookiegetCookie

可是Cookie也是不得以或缺的:Cookie的成效是与服务器实行交互,作为HTTP规范的一片段而存在
,而Web Storage仅仅是为了在地面“存款和储蓄”数据而生。

 

 

大家先张开四个页面,page一和page2,四个都以都是同源

html伍 web storage 的浏览器协理情状

浏览器的支撑除了IE7及以下不协理外,其余标准浏览器都统统援救(ie及FF需在web服务器里运营),值得一提的是IE总是办好事,举例IE7、IE陆中的UserData其实正是javascript本地存款和储蓄的缓慢解决方案。通过简单的代码封装能够统1到全部的浏览器都帮助web
storage。

要咬定浏览器是不是协助localStorage能够行使下边包车型地铁代码:

if(window.localStorage){
    alert("浏览支持localStorage") 
}else{ 
    alert("浏览暂不支持localStorage") 

} 
//或者 
if(typeof window.localStorage == 'undefined'){ 
    alert("浏览暂不支持localStorage") 
}
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <title>page A</title>
 5 </head>
 6 <body>
 7 <button>click<button>
 8 </body>
 9 <script>
10       document.querySelector('button').onclick = function(){
11               localStorage.setItem('Num', Math.random()*10);
12       }
13 </script>
14 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <title>page A</title>
 5 </head>
 6 <body>
 7 <button>click<button>
 8 </body>
 9 <script>
10       document.querySelector('button').onclick = function(){
11               localStorage.setItem('Num', Math.random()*10);
12       }
13 </script>
14 </html>

page1监听storage事件

localStorage和sessionStorage操作

localStorage 和 sessionStorage
都具备同样的操作方法,举例setItemgetItemremoveItem

 

 

4858美高梅 2

localStorage 和 sessionStorage 的方法

 

 

监听storage事件

setItem存储value

用途:将value存储到key字段

用法:.setItem( key, value)

代码示例:

sessionStorage.setItem("key", "value"); 
localStorage.setItem("site", "js8.in");

page B:
监听storage事件

page B:
监听storage事件

page2设置localStorage

getItem获取value

用途:获取钦命key本地存储的值

用法:.getItem(key)

代码示例:

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <title>page B</title>
 5 </head>
 6 <body>
 7 <script>
 8     window.addEventListener("storage", function (e) {
 9         console.log(e)
10         console.log(e.newValue)
11     });
12 </script>
13 </body>
14 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <title>page B</title>
 5 </head>
 6 <body>
 7 <script>
 8     window.addEventListener("storage", function (e) {
 9         console.log(e)
10         console.log(e.newValue)
11     });
12 </script>
13 </body>
14 </html>

4858美高梅 3

removeItem删除key

用途:删除钦定key本地存款和储蓄的值

用法:.removeItem(key)

代码示例:

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

设置localStorage

clear清除全体的key/value

用途:清除全数的key/value

用法:.clear()

代码示例:

sessionStorage.clear();
localStorage.clear();

开采page二的时候page一就举行了storage事件~然后方可用e.key判定setItem的key和得到value实行剥离操作~

别的操作方法:用点操作和[]操作存款和储蓄

web
Storage不但能够用自己的setItem,getItem等福利存取,也得以像一般对象同样用点(.)操作符,及[]的章程开始展览多少存储,像如下的代码:

var storage = window.localStorage; 
storage.key1 = "hello";  
storage["key2"] = "world"; 
console.log(storage.key1); 
console.log(storage["key2"]);
// result:storage = Storage {key1: "hello", key2: "world", length: 2}

localStorage 和 sessionStorage 的 key 和 length 属性达成遍历

sessionStoragelocalStorage提供的key()length能够方便的落到实处存款和储蓄的多少遍历,举个例子下边的代码:

var storage = window.localStorage; 
for (var i=0, len = storage.length; i < len; i++){ 
    var key = storage.key(i); 
    var value = storage.getItem(key); 
    console.log(key + "=" + value); }

storage事件

storage还提供了storage事件,当键值改换也许clear的时候,就能够触发storage事件,如上面包车型大巴代码就增添了一个storage事件退换的监听:

if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage); 
} 

function handle_storage(e){ 
    if(!e){
        e=window.event;
    } 
}

实际上运用的示范

示例1

/**
 * 用户登录
 */
function Login() {
    var sysUserData = {};
    sysUserData.userAccount = $("#userAccount").val();
    sysUserData.userPassword = $("#userPassword").val();
    $.ajax({
        type : "POST",
        url : "../api/login",
        data : JSON.stringify(sysUserData),
        dataType : "json",
        contentType : "application/json",
        success : function(successData) {
            console.info(successData);
            if(successData.status == "success"){
                // 把用户登录的账户信息放进sessionStorage 进行临时存储
                sessionStorage.setItem("elder_platform_name", successData.message)
                window.location.href="home"; 
            }else{
                alert("登录失败!");
            }
        },
        error : function(data) {
            console.info(data);
            alert("登录失败!");
        }
    });
}

示例2

$("#btn-login").click(function(){
    var form=$(this).parents("form:eq(0)");
    var account=form.find("[name='account']:eq(0)").val();
    var password=form.find("[name='password']:eq(0)").val();
    var remember=form.find("[name='remember']:eq(0)").attr("checked"); // 记住我
    if(remember){ // 把用户信息放到localStorage中
        localStorage.setItem("lg_account",account);
        localStorage.setItem("lg_password",password);
        remember=1;
        localStorage.setItem("lg_remember",remember);
    }else{ // 从localStorage中清楚用户信息
        localStorage.removeItem("lg_account");
        localStorage.removeItem("lg_password");
        remember=0;
        localStorage.removeItem("lg_remember");
    }
    $.post('/login',{'userName':account,'userPass':password,'rememberMe':remember},function(data){
        if(data.status=="SUCCESS"){
            location.href='/main'
        }else{
            $("#rmsg").html(data.msg);
            $("#rmsg").removeClass("hidden");
        }
    });
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有