window使用之子窗口引用父窗口对象

1.需求    

在项目中碰到这样的需求,在父窗口中通过某个操作,连接或者button按钮触发事件,然后跳转到一个新的窗口,在这期间需要把父窗口中的数据传递到子窗口,然后在子窗口中清除缓存,传递的对象数据仍然存在。

数据在浏览器中的存储有很多种,依赖于服务器端的session,cookie等操作皆可用来存储数据,以便我们在其他操作中继续使用该数据。session的作用仅限于当前页面的操作,如果回话结束或者 x掉浏览器的页面,都会造成session的清空。而cookie则会一直存在于浏览器中,除非你清除缓存,该数据就没了。除此之外,window中还提供了一些存储方法来提供子窗口对父窗口的引用,那么只要你父窗口不关闭,那么子窗口依然能引用到父窗口的数据,几遍你将缓存清除,因为父窗口没被刷新操作。另外一种方式便是使用localstorage来存储数据,它是存储在本地的,只要你不去主动销毁,它是一直存在的。所以存在localstorage中也是可以的。看看这几种存储数据是怎么操作的,怎么销毁的。

2.存储方式

2.1 cookie数据存储
官方提供的存储方式:document.cookie = "username=chenqk";这种形式,就可以把数据存储到cookie中了。
但是如果你这么定义:document.cookie = "username=chenqk;age=18;sex=男",那我document。cookie中实际存储的就是username=chenqk,而不是上面我们定义的,想想应该是这种形势下,它会以分号作为分隔符,每一个分隔符代表一个cookie,而他取到第一个分好之后的数据就舍弃了。换种说法,如果我要把这三个参数都存到cookie中,那么我得document.cookie = "username=chenqk";这样写三遍,是不是觉得挺傻。但是它cookie的存储是可以把你每次往cookie中存的数据都放到cookie中就相当于array的concat。
我在第一个页面中这么定义:




    
    
    


    the first page !

在跳转到第二个页面时将参数存到cookie中,然后在第二个页面引用cookie中的数据:




    
    
    




我们来看看点击跳转之前的数据:

window使用之子窗口引用父窗口对象_第1张图片
点击跳转之后的cookie:

window使用之子窗口引用父窗口对象_第2张图片

看来数据是存进去了,但是好像不对,修改一下方式:




    
    
    


the first page !

结果是对的:

window使用之子窗口引用父窗口对象_第3张图片

window使用之子窗口引用父窗口对象_第4张图片
除了JS提供的方法外,一些框架也做到对这种方式的支持
Jquery : 存储  $.cookie("username","chenqk")  获取:$.cookie("username");
Angularjs : 存储 $cookieStorage.put("username","chenqk")  获取 : $cookieStorage.get("uername");

对比出来,我还是喜欢angularjs这种方式来存储。这几种存储方式都差不多,清除缓存的时候都是不能保存的。

2.2 window存储数据

window提供了一种取父窗口的数据方式是通过opener来获取父窗口的引用。
我们可以在父窗口中定义一些需要传递的参数,并将这些参数信息传递给子窗口。

在父窗口中定义:




    
    
    


the first page !

跳转之前是没有数据的:

       window使用之子窗口引用父窗口对象_第5张图片
跳转之后的数据:

window使用之子窗口引用父窗口对象_第6张图片
来看看在子窗口中是否能取到,确实是有的:

window使用之子窗口引用父窗口对象_第7张图片

来试试我如果将缓存清除了,他还会存在么:

window使用之子窗口引用父窗口对象_第8张图片
也是存在的,那如果我清除缓存之后在刷新父窗口呢,其实在这里发现只要父窗口的数据不丢失,那么我在
子窗口中是一定能引用到的。
window使用之子窗口引用父窗口对象_第9张图片
父窗口中确实没有了,那么对应的子窗口中也引用不到了。还有一种情况如果我在子页面清除缓存之后,我们
知道清除缓存之后,session肯定会丢失,那么就需要用户重新登录。如果我在子窗口中直接登录,但是我还没
来得及登录就把父窗口叉掉了,那么这个参数我还能取到么?来猜想一下,应该是取不到的,因为依赖的窗口都没了
window对应的也就消失了,也就不存在保存的数据了。

window使用之子窗口引用父窗口对象_第10张图片

2.3 localStorage保存数据

localStorage作为存储数据功能,比cookie要强大,如果数据量比较大的时候还是使用localStorage。此外
localstorage没有过期时间。在你创建之后一直存在,除非程序执行删除操作。




    
    
    


the first page !

点击跳转之后:

window使用之子窗口引用父窗口对象_第11张图片
子页面定义:




    
    
    




显示信息:

window使用之子窗口引用父窗口对象_第12张图片
当然你关闭父窗口他也是存在的,唯一的缺点应该是清除缓存的时候也会清空跟cookieStorage很像,不同
就是扩展了cookiestorage的存储大小。

你可能感兴趣的:(前端,window,窗口数据传递)