精华内容
下载资源
问答
  • sessionstorage实现共享
    千次阅读
    2021-03-28 17:43:40

    最初的时候误认为只要是同一网站下所有页面共享sessionStorage,后来发现事情不是这样的。页面是否共享sesstionStorage与打开方式有关系:通过点击链接或window.open打开的新标签页与当前页面是同一个session;其它方式单独新开页面,会初始化一个新的session,即使同一网站下,他们也不属于同一个session。

    譬如同一网站下有A、B两个页面,AB页面中均添加key为detail的sesstionStorage(A页面:sesstionStorage.setItem(“detail”, “A”),B页面:sesstionStorage.setItem(“detail”, “B”)),A页面中点击链接打开的新标签与A页面享有同样的session,detail值均为A;B页面中点击链接打开的新标签与B页面享有同样的session,detail值均为B。AB页面中的session互不干扰。

    更多相关内容
  • vue项目中实现sessionStorage在不同页面共享

    ——解决浏览器复制网址在新的tag里能正常跳转的问题

    一、问题描述

            在新的页面打开一个tag粘贴上一个页面的地址时不能正常跳转,直接跳转到了login页面。

    二、原因分析

            百度发现是因为sessionStorage和localStorage存储周期不同:

    • sesssionStorage:关闭当前浏览器,数据就随之消失
    • localStorage:如果不手动清除,数据会一直存在

            此处参考官方文档JavaScript 存储对象 | 菜鸟教程

            和以下博客localstorage和sessionstorage的区别 - 付杰博客sessionStorage和localStorage有什么区别_火兰的博客-CSDN博客_localstorage和sessionstorage的区别

    三、解决办法 

            当我们作比较正规或者较大的项目时,最好不要用localStorage,毕竟通过某些方法是可以将存放的token转化为字符串信息的。那就需要解决sessionStorage不能在页面之间共享信息的问题了,原理主要参考以下文章:

    html5——sessionStorage不能跨标签页解决方案-奇奇笔记

    思路:

    1. 当sessionStorage没有信息时,使用localStorage存储
    2. 触发storage事件,并设置监听:localStorage存储当前sessionStorage的token
    3. localStorage保存的token变化后,新页面sessionStorage保存新的信息

    实现:

            实现过程中会发现一个问题:监听storage事件未执行完就已经判断了登录信息。于是便想到是不是异步的问题,那么就要让这个函数完成之后再进行login。

    此处参考:

            sessionStorage不能跨标签页解决方案--vue项目_拷贝程序猿的博客-CSDN博客_sessionstorage不同标签页

     sessionStorage共享(监听storage事件)_MINO吖的博客-CSDN博客_sessionstorage事件

    我的实现方法:

     

     在需要判断login的地方调用

    ps:

    • localStorage.setItem('getSessionStorage', Date.now())触发的不是新页面而是旧页面的storage(localStorage存的数据只要发生变化就会触发storage,此处由undefined变为date)
    • 个人想法,应该有不对或者不完善的地方,仅供参考,欢迎讨论

    展开全文
  • (function() { const AuthCode = () => sessionStorage.getItem('Auth-Code'); const secretKey = () =&... // 这个调用能触发目标事件,从而达到共享数据的目的 localStorage.setItem('getSes...

    目标:解决sessionStorage在点击浏览器右键‘在新标签页中打开’或者复制网址在新标签页中粘贴并转到时,打开的新标签页没有sessionStorage数据问题。如会导致用户重新登录。

    假设 A 页面是含有sessionStorage的页面,B 页面是复制地址在新标签页打开的页面,此时b页面不存在原页面的sessionStorage(sessionStorage特性),通过以下方法可实现共享。

    下面例子是我想要在 B 页面获取 A 页面key为Auth-CodesecretKeysessionStorage

    (function() {
    	const AuthCode = () => sessionStorage.getItem('Auth-Code');
    	const secretKey = () => sessionStorage.getItem('secretKey');
    	//如果B页面不存在这两个sessionStorage
    	if (!AuthCode() || !secretKey()) {
    		//就随便存一个key为getSessionStorage的localStorage,用于触发A页面的getSessionStorage目标事件
    		localStorage.setItem('getSessionStorage', Date.now());
    	};
    	// 目标事件
    	window.addEventListener('storage', function(event) {
    		//此时A页面获取到了B页面触发的getSessionStorage事件
    		if (event.key == 'getSessionStorage') {
    			//就把A页面的sessionStorage存入localStorage,用以触发B页面的sessionStorage事件
    			//触发完就立即删除这个sessionStorage
    			localStorage.setItem('sessionStorage', JSON.stringify({
    				'Auth-Code': AuthCode() ?? '',
    				'secretKey': secretKey() ?? ''
    			}));
    			localStorage.removeItem('sessionStorage');
    			//此时B页面获取到了A页面触发的sessionStorage事件(删除前)且B页面不存在这两个sessionStorage
    		} else if (event.key == 'sessionStorage' && !AuthCode() || !secretKey()) {
    			//在B页面解析A页面存入的localStorage值并写入B页面的sessionStorage中(共享完成)
    			var data = JSON.parse(event.newValue);
    			for (key in data) {
    				sessionStorage.setItem(key, data[key]);
    			}
    		}
    	});
    }());
    
    展开全文
  • sessionStorage共享情况和localStorage

    千次阅读 2018-11-15 11:55:00
    1、不同浏览器无法共享localStorage和sessionStorage的值。 2、相同浏览器下,并且是同源窗口(协议、域名、端口一致),不同页面可以共享localStorage值,通过跳转的页面可以共享sessionStorage值。 3、关于...

    1、不同浏览器无法共享localStorage和sessionStorage的值。

    2、相同浏览器下,并且是同源窗口(协议、域名、端口一致),不同页面可以共享localStorage值,通过跳转的页面可以共享sessionStorage值。

    3、关于sessionStorage,通常说sessionStorage关闭页面即消失,但是通过跳转的页面可以共享sessionStorage值,跳转有多种方式:

        (1)  <a href="同源页面" target="_self">跳转</a>    //原窗口
        (2) <a href="同源页面" target="_blank">跳转</a>  //新开窗口
        (3) window.location.href = '同源页面'      //原窗口
        (4) window.location.replace('同源页面')   //原窗口
        (5) window.open('同源页面')       //新开窗口
        (6) this.$router.push({path: '同源页面'})   //通过路由跳转共享值
     
    app端通过原生方法更换webView实现跳转,这种方式不能共享sessionStorage,原窗口跳转的页面传递sessionStorage,改变存储值会相互影响,新开窗口跳转方式传递sessionStorage,改变存储值互不影响。

    转载于:https://www.cnblogs.com/wy90s/p/9962705.html

    展开全文
  • vue实践-多标签页共享sessionstorage

    千次阅读 2020-05-11 11:48:55
    经过一番努力,发现是因为前端的自校验用户信息存储在sessionstorage中,而sessionstorage是针对单标签页的,因此就有了这篇文章,共享sessionstorage。 看了很多博客,有详细的方法的,但因为是小白入门,因此也不...
  • 不是所有的sessionStorage都能共享。 1. 第一种情况 浏览器中打开A页面,再通过A页面打开新的标签页B页面,此时A、B两个页面的sessionStorage是“共享”的。这里的共享指的是B页面会把A页面的的 sessionStorage 拷贝...
  • sessionStorage在不同页签中的数据共享问题
  • 最近将chrome更新到最新的版本...在A页面中我们将共享的数据保存到sessionStorage中,并新建超链接元素并触发其单击事件。 sessionStorage.setItem('parameter', JSON.stringify(parameter)); var link = angular.eleme
  • 一开始用localStorage,不论打开多少个页面,哪怕关掉重新打开,同一个网站...但来了新的问题,登录后,父页面跳转打开的新页面,两个页面之间的值无法共享了。 后来想了一下,可以利用window.opener来解决,自己写...
  • 两个不同的域名的localStorage...实现原理1.在domain2.com的页面中,在页面中嵌入一个src为domain1.com的iframe,此时这个iframe里可以调用domain1.com的localStorage。2.用postMessage方法实现页面与iframe之间的通...
  • 它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍...
  • 问题描述:业务从A页面跳转到B页面,需要由A页面向B页面传入一个对象。B页面解析对象中的值,然后根据这些值做具体的业务逻辑。 一般的传值方法如下: A页面跳转到B页面时: ...解决方法:使用sessionStorage会话存储
  • 首先抛出一个十分简单的解决办法,那就是使用window.open()方法打开这个同源tab页即可实现sessionStorage的有效共享。 第二种方法是通过window.addEventListener('storage', () => {})事件监听,来进行同源跨
  • 在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能。原理就是将数据缓存早window.top这个窗口,这样无论子窗口父窗口...
  • 原文:Sharing sessionStorage between tabs for secure multi-tab authentication 译者得er瑟 昨天,就在昨天,前端一同事提了一个问题:我们的系统,用户重新开一个标签页,就要重新登录。我当时觉得这怎么可能...
  • chrome89版本通过跳转到同一域名和端口下的不同网站无法获取sessionStorage; 导致原因:        更新到89版本后,通过a标签target="_blank"跳转到新页面时sessionStorage就会...
  • 大家到处直接使用localstorage[‘aaa’]=’这是一段示例字符串’这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起...
  • sessionStorage的局限:sessionStorage是页面级别的,仅在一个标签页生效,如果同一...如果想突破这种局限,实现多tab页共享存取数据同时又有sessionStorage暂存性的功能(关闭页面时存在里面的数据也消失的功能),则...
  • 1、不同浏览器无法共享localStorage和sessionStorage的值。 2、相同浏览器下,并且是同源窗口(协议、域名、端口一致),不同页面可以共享localStorage,Cookies值,通过跳转的页面可以共享sessionStorage值。 3、...
  • 需求背景 业务中需要根据定位获取周边的位置点,定位功能包括自动获取定位和...hybrid开发中会打开多个webView 页面,页面A设置数据,页面B中要得知数据,如果使用redux状态管理器、或浏览器sessionStorage在当前webVi
  • 需求:在某个列表页面跳转到增加新项目页面后需要返回到前一个页面 并且数据最新数据。刚开始是做法是history.back();...这个时候可以用sessionStorage来存储临时变量来判断 母页面: window.onload = functi...
  • 如何用sessionStorage保存对象和数组 https://blog.csdn.net/qq_30868289/article/details/79582280 一、sessionStorage、localStorage详解 webstorage webstorage是本地存储,存储在客户端,包括localStorage和...
  • 前端存储有localStorage、sessionStorage、cookie三种方式。 那么它们各自的缓存方法是如何实现的呢?本文将以cookie为主来实现缓存方法。 一、cookie document.cookie 属性看起来像一个普通的文本字符串,其实它...
  • 之前一段时间面试,包括朋友们的面试中经常会问到一个需求:  如果用户好不容易翻到...被问到之后就在想如何实现(ps:因为我觉得不仅是要应付面试,同时这个需求真的太常见了,我竟然不会。),后来想了几个解决...
  • 使用Vuex实现数据数据共享 City与Home组件没有公共父级组件,要实现共有数据分享,可以借助Vuex。 Vuex基础知识 Vuex是什么呢? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用...
  • 所以这里引出的技术需求就是:如何在每个页面之间实现数据共享,比如用户进入下个选择页面之后怎么保存用户在上一个页面选择的数据,以便最后统一提交,因为这个项目比较独立,而且也只是简单的几个页面做统计需求,...
  • 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:...在大多数情况下,可供我们使用就是LocalStorage和SessionStorage。 本文中,我们将会从安..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,625
精华内容 3,050
关键字:

sessionstorage实现共享