如何使JavaScript中localStorage的setItem与getItem实现跨域功能

首先得明确：你的代码直接用 localStorage 跨域是行不通的——浏览器的同源策略（Same-Origin Policy）会严格限制 localStorage 只能被同一协议、域名、端口下的页面访问。https://cs.money 和 https://tynachofinder.ge/finder/ 是完全独立的域名，所以它们的 localStorage 是完全隔离的，互相读不到对方的数据。

下面给你几个可行的解决方案，结合你的业务场景给出具体实现：

方案1：用 postMessage + 同源中间页（最推荐的纯前端方案） #

核心思路是找一个「双方都能访问的同源页面」作为数据中转枢纽，通过 postMessage 在主页面和中间页之间传递数据，由中间页负责读写 localStorage。

步骤1：编写中间页（比如放在 https://cs.money/storage-bridge.html） #

这个页面只做数据中转，逻辑非常简单：

<script>
window.addEventListener('message', (e) => {
  // 只处理信任的域名请求，防止恶意攻击
  const trustedOrigins = ['https://cs.money', 'https://tynachofinder.ge'];
  if (!trustedOrigins.includes(e.origin)) return;

  switch(e.data.action) {
    case 'set':
      localStorage.setItem(e.data.key, e.data.value);
      e.source.postMessage({ status: 'ok', msg: '存储成功' }, e.origin);
      break;
    case 'get':
      const value = localStorage.getItem(e.data.key);
      e.source.postMessage({ status: 'ok', value }, e.origin);
      break;
  }
});
</script>

步骤2：修改 cs.money 页面的代码 #

当页面加载时，嵌入隐藏的中间页，把目标元素的文本传给中间页存储：

if (location.href === "https://cs.money") {
  // 创建隐藏的iframe加载中间页
  const bridgeIframe = document.createElement('iframe');
  bridgeIframe.src = 'https://cs.money/storage-bridge.html';
  bridgeIframe.style.display = 'none';
  document.body.appendChild(bridgeIframe);

  // 等iframe加载完成后发送数据
  bridgeIframe.addEventListener('load', () => {
    const targetText = document.querySelector("#offer_container_bot > div.items > div > div.p").innerText;
    bridgeIframe.contentWindow.postMessage(
      { action: 'set', key: 'items', value: targetText },
      'https://cs.money'
    );
  });

  // 可选：接收存储成功的反馈
  window.addEventListener('message', (e) => {
    if (e.origin === 'https://cs.money' && e.data.status === 'ok') {
      console.log('数据已存入中间页的localStorage');
    }
  });
}

步骤3：修改 tynachofinder.ge/finder/ 页面的代码 #

同样嵌入中间页，请求读取数据并设置到目标元素：

if (location.href === "https://tynachofinder.ge/finder/") {
  const bridgeIframe = document.createElement('iframe');
  bridgeIframe.src = 'https://cs.money/storage-bridge.html';
  bridgeIframe.style.display = 'none';
  document.body.appendChild(bridgeIframe);

  bridgeIframe.addEventListener('load', () => {
    bridgeIframe.contentWindow.postMessage(
      { action: 'get', key: 'items' },
      'https://cs.money'
    );
  });

  // 接收中间页返回的数据并渲染
  window.addEventListener('message', (e) => {
    if (e.origin === 'https://cs.money' && e.data.status === 'ok') {
      const targetElement = document.querySelector("body > header > a");
      if (e.data.value) targetElement.innerHTML = e.data.value;
    }
  });
}

方案2：后端中转（适合有后端服务的场景） #

如果两个域名都有自己的后端接口，可以通过后端来传递数据：

• 在 cs.money 页面，把目标文本发送到自己的后端，后端将数据存入数据库或设置跨域Cookie（需要配置 SameSite=None、Secure 等属性）。
• 在 tynachofinder.ge/finder/ 页面，调用自己的后端接口，由后端去请求 cs.money 的后端获取数据，再返回给前端渲染。

这种方法需要后端配合，好处是数据存储更安全，适合敏感数据场景。

方案3：第三方云存储（比如 Firebase） #

如果不想自己维护中间页或后端，可以用第三方云存储服务（比如 Firebase Realtime Database），两个页面都通过官方SDK读写数据。这种方法快速便捷，但需要引入第三方依赖。

关键注意事项 #

• 所有跨域操作一定要验证消息来源（比如 postMessage 里的 e.origin），防止恶意网站伪造请求窃取数据。
• 敏感数据不建议用前端方案传递，优先考虑后端中转或加密处理。
• 如果你的两个域名是同一主域名的子域名（比如 a.example.com 和 b.example.com），可以通过 document.domain = 'example.com' 共享 localStorage，但你的场景是完全不同的主域名，这个方法不适用。

内容的提问来源于stack exchange，提问作者d4vit