window.open打开新页面localstorage为什么会丢失?

使用window.open打开同源新tab,新页面localstorage中token丢失。

阅读 2.7k
avatarAI BotBETA

这个问题可能出现的原因是由于跨域策略(Same-Origin Policy)的限制。

Same-Origin Policy 是浏览器的一种安全机制,它只允许相同来源的网页脚本访问彼此的资源。如果一个脚本尝试去访问一个不同源(协议、域名或端口三者中有任何一个不同)的网页的资源,那么浏览器就会阻止这种行为,并抛出一个错误。

在你的情况中,当你使用 window.open 打开一个新的同源页面时,新页面被视为与原始页面有相同的源。然而,当新页面尝试访问其 localStorage 时,由于跨域限制,它无法访问原始页面的 localStorage。这是为了防止恶意脚本获取用户的敏感数据。

但是为什么在这种情况下,新页面的 token 会丢失呢?这可能是因为这个 token 是从原始页面通过某种方式(例如:通过查询参数,或者通过父页面与子页面的通信)传递到新页面的。新页面在试图获取这个 token 时,可能由于某种错误(例如:未处理的全局错误),未能成功获取到这个 token。

解决这个问题的一个可能方法是,在新页面加载完成之后,使用 window.opener 对象来访问并获取原始页面的 localStorage。例如:

window.onload = function() {
    var token = window.opener.localStorage.getItem('token');
    if (token) {
        // 使用 token
    } else {
        // 处理 token 丢失的情况
    }
};

需要注意的是,这种方法只有在新的页面与原始页面同源,且在新的页面加载完成后才有效。如果这两个条件不满足,那么这种方法也可能无法正常工作。因此,如果你遇到这个问题,最好的解决方法可能是避免使用 window.open,或者确保新页面在加载时能够正确地获取到所有的必要数据。

6 个回答

可能的原因
1、并不同源
2、在新页面该属性被删除了(如果确认同源的情况下,可以检查下代码中有没有相关逻辑)

不同源,不能公享啊,可通过地址栏传啊

跨域限制吧,之前我下载的时候也是这样的,后期都是把token拼在地址后面了,要么是后端单独写了一个类似验证码之类时效性键处理的

localstorage 吃同源策略,
token 拼到地址栏做免密登录吧

我记得用标签打开,设置 herf为 opener,好像就不会丢失

新手上路,请多包涵

在使用 window.open 打开新页面时,每个新打开的页面都会有自己独立的 JavaScript 执行环境和存储空间。这意味着新页面无法直接访问或共享原始页面的 localStorage 数据。

localStorage 是浏览器提供的一种用于在浏览器端持久保存数据的机制。它以键值对的形式存储数据,并且数据在页面关闭后仍然存在。但是,每个页面都有自己独立的 localStorage,并且无法直接访问其他页面的 localStorage

1.可以通过路由 url 传参
let data = { key: 'value' };
let url = 'newPage.html?data=' + encodeURIComponent(JSON.stringify(data));
window.open(url);

2.使用 Window.postMessage 进行跨页面通信
let data = { key: 'value' };
let newWindow = window.open('newPage.html');
newWindow.postMessage(data, '*');
在新页面中监听事件
window.addEventListener('message', function(event) {
let receivedData = event.data;
// 处理接收到的数据并存储到新页面的 localStorage 中
});

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏