动用localStorage跨页面通讯,浏览器页面间通讯方法

  在写页面包车型大巴时候偶然会越过那样的需要,要求八个页面之间传递数据只怕四个风云。今年,就须要用到本身明天所要讲的storage事件,学习那一个事件从前,须求先掌握localStorage的用法。具体用法能够查看其余文档。出发storage事件的尺度如下:

  在写页面包车型大巴时候偶然会碰着那样的须要,必要七个页面之间传递数据也许3个事变。今年,就需求用到自身今日所要讲的storage事件,学习那几个事件在此之前,要求先领会localStorage的用法。具体用法能够查阅其余文书档案。出发storage事件的口径如下:

localStorage
即便浏览器关闭了,数据也会被封存下来并可用于具备来自同源(同样域名、协交涉端口)窗口的加载。

html5中的Web
Storage包涵了三种存款和储蓄格局:sessionStoragelocalStorage。都以用来储存客户端一时半刻新闻的对象.他们均只好存款和储蓄字符串类型的靶子(即使专门的学问中得以积累其余原生类型的对象,可是近期甘休未有浏览器对其进展落到实处)。

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

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


  storage事件,唯有在同源页面下,才有效益,差别源是未有功能的。那么哪些是同源呢?

  storage事件,唯有在同源页面下,才有作用,分化源是未有效益的。那么什么样是同源呢?

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

sessionStorage:用于地点存款和储蓄多个会话(session)中的数据,那些多少只有在同2个对话中的页面才能访问,并且当会话结束后数据也跟着销毁。由此sessionStorage不是1种持久化的地点存款和储蓄,仅仅是会话品级的存款和储蓄。

  U汉兰达L由和煦、域名、端口和路径组成,假如七个U大切诺基L的情商、域名和端口一样,则表示他们同源。举个栗子:

  U奥迪Q3L由和睦、域名、端口和路线组成,假使八个U奥迪Q3L的商业事务、域名和端口一样,则象征他们同源。举个栗子:

二种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         //不同源

澳门葡京 1

今非昔比浏览器不可能共享localStoragesessionStorage中的新闻。同样浏览器的不等页面间能够共享一样的localStorage动用localStorage跨页面通讯,浏览器页面间通讯方法。(页面属于同一域名和端口),不过不相同页面或标签页间不可能共享sessionStorage的音讯。那里供给小心的是,页面及标签页仅指顶尖窗口,若是一个标签页包蕴多个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
的尺寸是受限的,并且每趟你请求八个新的页面包车型大巴时候 库克ie
都会被发送过去,这样平空浪费了带宽,其它 Cookie
还索要钦赐功效域,不得以跨域调用。

除此之外,Web
Storage
拥有setItem,getItem,removeItem,clear等艺术,不像cookie需求前端开垦者本人包裹setCookiegetCookie

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

 

 

咱俩先展开多个页面,page一和page二,多少个都以都是同源

html5 web storage 的浏览器协助意况

浏览器的协助除了IE7及以下不援助外,其余专门的职业浏览器都统统支持(ie及FF需在web服务器里运维),值得一说的是IE总是办好事,比如IE七、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

 

 

澳门葡京 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>

澳门葡京 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");
        }
    });
});

相关文章

发表评论

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

*
*
Website