在不同的域中设置 localStorage答案

【问题标题】：Set a localStorage in a different domain在不同的域中设置 localStorage
【发布时间】：2021-09-08 03:49:23
【问题描述】：

我正在尝试在域（如 my-site.com）中设置一个变量，我可以从其他站点（如 my-other-site.com）访问该变量。基本上，当我收到来自服务器的响应时，我想在 localStorage 中设置一个变量，然后将页面重定向到下一个站点（例如：在 my-site.com 中，我设置变量 'foo' 并重定向页面。在 my-other-site.com 中，我想访问该变量（foo））。哦！我差点忘了，我用的是 Vue

我已经尝试使用 iframe，使用本教程 (https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage)。我尝试了一些库，如 cross-storage (https://www.npmjs.com/package/cross-storage#overview) 和 biforst-cors(https://www.npmjs.com/package/bifrost-cors)，但它们都没有像我预期的那样工作。我知道可以使用查询参数，但我不能使用它知道

我有这个：

localStorage.clear()
window.localStorage.setItem('user', JSON.stringify(response.body.data) )                                                
window.localStorage.setItem('token', response.body.token)                                                
window.location.href = `http://localhost:8081/#/` //redirect

基本上，我想在其他域中同时使用变量 user 和 token。

如果有人能帮我带来想法或类似的东西，那对我有很大帮助。

【问题讨论】：

您不能直接对其他域执行任何操作。您需要在服务器上进行它们之间的通信，或者如果一个页面具有对包含另一个窗口或 iframe 的引用，则使用 postMessage()。
但是，我可以在页面（我想使用这些变量的页面）加载时使用它吗？
不，你不能。每个域都有自己的localStorage。当您重定向到另一个域时，您将无法访问前一个域的数据。
我明白了，感谢您的评论 :)。我将尝试找到一种无需查询参数的方法。

标签： javascript local-storage cross-domain

【解决方案1】：

一个不同的解决方案是这样的：

var DifferentWindow=window.open("http://www.example.com/");
DifferentWindow.localStorage.setItem("Key","Value");

这是简单的Javascript，所以我希望它有所帮助它的作用是打开一个带有链接的新窗口，并将该窗口本地存储中的变量设置为“值”。

【讨论】：

尝试为其他窗口设置 localStorage 变量时出现以下错误：Blocked a frame with origin "https://stackoverflow.com" from accessing a cross-origin frame.

【解决方案2】：

使用 Bifrost-cors 库的解决方案。 https://www.npmjs.com/package/bifrost-cors

您必须在两个域中初始化 lib。
在 exampleA.com
var bifrostCors = new bifrostCors("http://exampleB.com/")
在 exampleB.com
var bifrostCors = new bifrostCors("http://exampleA.com/")

那么你可以使用
bifrostCors.setLocalStorage({key: "user", value: "persons"})

【讨论】：

嗨，我正在尝试使用它，但出现此错误 `core.js:6185 ERROR TypeError: bifrostCors is not a constructor'。你对此有什么想法吗