LocalStorage跨域方法

亮学长

已于 2024-01-26 16:37:41 修改

阅读量1k

点赞数 1

文章标签：前端

于 2024-01-26 16:32:21 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/135869631

版权

本文介绍了如何在JavaScript中实现跨域localStorage操作，包括使用iframe通信、postMessageAPI、window.opener以及通过服务器端中转，同时强调了安全性措施和浏览器兼容性考虑。

摘要由CSDN通过智能技术生成

在默认情况下，localStorage 是基于同源策略的，因此只能在同一个域名下的页面中进行读写操作。然而，有几种方法可以实现 localStorage 在跨域场景下的读写操作：

使用 iframe：a.baidu.com内有localStorage，创建一个隐藏的 iframe 元素，并将其 src 设置为同域下的b.baidu.com。b.baidu.com中脚本操作 localStorage，从而实现跨域访问。这种方法通常被称为 “iframe 通信”，允许主页面与 iframe 之间进行消息传递。
使用 postMessage API：可以利用 postMessage API 在不同窗口（包括不同域名和不同协议）之间进行安全的跨域消息传递。通过在不同窗口间发送消息，将需要共享的数据进行传递，并在目标窗口中将数据存储到 localStorage。
利用 window.opener：当一个窗口通过 window.open 方法打开另一个窗口时，被打开的窗口可以通过 window.opener 引用到打开它的窗口。利用这个引用，可以在不同窗口间进行消息传递，从而实现将数据存储到 localStorage。
使用服务器端中转：如果你有一个自己控制的服务器，可以通过服务器端中转来实现跨域访问。当需要将数据存储到 localStorage 时，可以将数据发送到服务器端，然后服务器端将数据存储在自己的 localStorage 中。在需要获取存储数据时，可以通过服务器端提供的接口获取数据。

无论使用哪种方法，都需要注意安全性，并只允许可信的域名进行跨域访问。此外，还需要处理跨域消息传递的通信协议和消息格式，确保正确地发送和接收数据。

需要注意的是，虽然上述方法可以实现 localStorage 的跨域访问，但这些方法并非针对所有浏览器都适用，可能在某些情况下存在限制。因此，在实际应用中，应根据具体需求和浏览器兼容性进行选择和兼容处理。

iframe方法

下面是使用 iframe 进行跨域访问的示例代码：

在主页面（a.baidu.com）上添加下面的代码，该代码包含了一个隐藏的 iframe，并将其 src 设置为同域下的一个页面（b.baidu.com）：

<!DOCTYPE html>
<html>
<head>
  <title>Main Page</title>
</head>
<body>
  <iframe id="myIframe" style="display: none;"></iframe>
  <script>
    var iframe = document.getElementById('myIframe');
    iframe.src = 'https://b.baidu.com';
  </script>
</body>
</html>

在同域下的 iframe 页面（b.baidu.com）上添加下面的代码，该代码包含了与主页面进行通信的脚本：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Page</title>
</head>
<body>
  <script>
    // 从主页面获取数据
    var data = window.parent.localStorage.getItem('sharedData');
    
    // 向主页面发送数据
    window.parent.postMessage('Hello from iframe!', 'https://a.baidu.com');
  </script>
</body>
</html>

在主页面的脚本中，可以使用 postMessage 事件监听来接收从 iframe 页面发送过来的数据，并进行处理：

window.addEventListener('message', function(event) {
  // 检查消息来源是否为指定的 iframe 页面
  if (event.origin === 'https://b.baidu.com') {
    // 处理接收到的数据
    console.log('Received message from iframe:', event.data);
  }
});

这样，主页面和 iframe 页面之间就可以通过 iframe 通信方式进行跨域消息传递，实现共享数据或进行其他操作。

需要注意的是，为了确保安全性，需要对消息来源进行验证，以防止来自恶意网站的消息被处理。在实际应用中，还需要进行适当的错误处理和数据验证。

亮学长

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
LocalStorage跨域方法

方法打开另一个窗口时，被打开的窗口可以通过 window.opener 引用到打开它的窗口。利用这个引用，可以在不同窗口间进行消息传递，从而实现将数据存储到。通过在不同窗口间发送消息，将需要共享的数据进行传递，并在目标窗口中将数据存储到。无论使用哪种方法，都需要注意安全性，并只允许可信的域名进行跨域访问。使用服务器端中转：如果你有一个自己控制的服务器，可以通过服务器端中转来实现跨域访问。时，可以将数据发送到服务器端，然后服务器端将数据存储在自己的。在需要获取存储数据时，可以通过服务器端提供的接口获取数据。
复制链接

扫一扫