问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
九号球
    213
    新手上路，请多包涵

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

    javascript前端window.open
    阅读 5.8k
    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 个回答
    得票最新
    头像
    hfhan
      29k72241
      ✓ 已被采纳

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

      头像
      danranshizhi
        17065181

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

        头像
        落子无悔
          31113

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

          头像
          抱歉_你想多了
            8431828

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

            头像
            LUu
              131

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

              头像
              ꪶꪮꪜꫀ_এ᭄_峰
                2
                新手上路，请多包涵

                在使用 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 中
                });

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