Javascript 使用javascript跨域本地存储
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33957477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
cross domain localstorage with javascript
提问by yumoji
We have a javascript api.js which is hosted on domain api.abc.com. It manages the local storage.
我们有一个 javascript api.js，它托管在域 api.abc.com 上。它管理本地存储。
We included this javascript in our websites at abc.com and login.abc.com as a cross domain js like
我们将此 javascript 包含在我们的网站 abc.com 和 login.abc.com 中作为跨域 js，例如
<script src="http://api.abc.com/api.js">
I understand that localstoarge is per domain basis. However since api.js is loaded from api.abc.com, I expected that it will have access to local storage of api.abc.com from both the domains. Unfortunately, it doesn't seem to be the case. When api.js stores a value in localstoarge from one domain, it's not accessible to it when loaded from other domain.
我知道 localstoarge 是基于域的。但是，由于 api.js 是从 api.abc.com 加载的，我希望它可以从两个域访问 api.abc.com 的本地存储。不幸的是，情况似乎并非如此。当 api.js 从一个域将一个值存储在 localstoarge 中时，它在从其他域加载时无法访问。
Any idea?
任何的想法？
回答by 25r43q
How about using cross domain postmessage and iframes?
如何使用跨域 postmessage 和 iframes？
So on your wrong-domain-page you include an iframe that posts messages with the cookie data back.
因此，在您的错误域页面上包含一个 iframe，该 iframe 将带有 cookie 数据的消息发布回来。
Here is a solid example of cross domain postmessages: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
这是跨域 postmessages 的一个可靠示例：http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
live example: http://codepen.io/anon/pen/EVBGyz//forked sender code with a tiiiiiny change :) :
现场示例： http://codepen.io/anon/pen/EVBGyz //分叉的发件人代码，有一个 tiiiiiny 变化:)：
window.onload = function() {
// Get the window displayed in the iframe.
var receiver = document.getElementById('receiver').contentWindow;
// Get a reference to the 'Send Message' button.
var btn = document.getElementById('send');
// A function to handle sending messages.
function sendMessage(e) {
// Prevent any default browser behaviour.
e.preventDefault();
// Send a message with the text 'Hello Treehouse!' to the new window.
receiver.postMessage('cookie data!', 'http://wrong-domain.com');
}
// Add an event listener that will execute the sendMessage() function
// when the send button is clicked.
btn.addEventListener('click', sendMessage);
}
Receiver code:
接收器代码：
window.onload=function(){
var messageEle=document.getElementById('message');
function receiveMessage(e){
if(e.origin!=="http://correct-domain.com")
return;
messageEle.innerHTML="Message Received: "+e.data;
}
window.addEventListener('message',receiveMessage);
}
回答by Benjamin Chelli
As noticed in your post the localStorage (sessionStorage too) won't be stored on the storage related to the domain api.abc.com. If this was the case, by using CDN version of a library using localStorage you would have to share storage with all the other websites using this library.
正如您在帖子中所注意到的，localStorage（也是 sessionStorage）不会存储在与域 api.abc.com 相关的存储中。如果是这种情况，通过使用 localStorage 使用库的 CDN 版本，您将必须与使用此库的所有其他网站共享存储。
One good solution could be to use an iframe with postMessage as explained in the following stack overflow: use localStorage across subdomains
一个好的解决方案可能是使用带有 postMessage 的 iframe，如以下堆栈溢出中所述： 跨子域使用 localStorage
回答by super1ha1
You might try this cross-storagefrom Zendesk. Basically, There are hubs and clients:
您可以从 Zendesk尝试这种跨存储。基本上，有集线器和客户端：
hubs: reside on any server, interact directly with LocalStorage API
clients: load the hub using an embedded iframe, and post messages, interact with data
集线器：驻留在任何服务器上，直接与 LocalStorage API 交互
客户端：使用嵌入式 iframe 加载集线器，发布消息，与数据交互
Key things is you can configure the permission (get, set, delete) that each host or domain client could have. The library is divided into two types of components: hubs and clients.
关键是您可以配置每个主机或域客户端可能拥有的权限（获取、设置、删除）。该库分为两种类型的组件：集线器和客户端。
Care should be made to limit the origins of the bidirectional communication. As such, when initializing the hub, an array of permissions objects is passed. Any messages from clients whose origin does not match the pattern are ignored, as well as those not within the allowed set of methods. The set of permissions are enforced thanks to the same-origin policy. However, keep in mind that any user has full control of their local storage data - it's still client data. This only restricts access on a per-domain or web app level.
应注意限制双向通信的来源。因此，在初始化集线器时，会传递一组权限对象。来自源与模式不匹配的客户端的任何消息都将被忽略，以及那些不在允许的方法集中的消息。由于同源策略，这组权限得以强制执行。但是，请记住，任何用户都可以完全控制他们的本地存储数据——它仍然是客户端数据。这仅限制每个域或 Web 应用程序级别的访问。
