Html HTML5 数据库和 localStorage 可以跨子域共享吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4177803/
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
Can HTML5 databases and localStorage be shared across subdomains?
提问by Sebastian Celis
I am attempting to share data across subdomains using Safari. I would like to use an HTML5 database (specifically localStorageas my data is nothing but key-value pairs). However, it seems as though data stored to domain.comcan not be accessed from sub.domain.com(or vice versa). Is there any way to share a single database in this situation?
我正在尝试使用 Safari 跨子域共享数据。我想使用 HTML5 数据库（特别是localStorage，因为我的数据只是键值对）。但是，似乎无法从sub.domain.com访问存储到domain.com 的数据（反之亦然）。在这种情况下，有没有办法共享单个数据库？
回答by super1ha1
Update 2016
2016 年更新
This libraryfrom Zendesk worked for me.
Zendesk 的这个库对我有用。
Sample:
样本：
Hub
中心
// Config s.t. subdomains can get, but only the root domain can set and del
CrossStorageHub.init([
{origin: /\.example.com$/, allow: ['get']},
{origin: /:\/\/(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);
Note the $for matching the end of the string. The regular expression in the above example will match origins such as valid.example.com, but not invalid.example.com.malicious.com.
注意$用于匹配字符串的结尾。上面示例中的正则表达式将匹配诸如valid.example.com, 但不是invalid.example.com.malicious.com。
Client
客户
var storage = new CrossStorageClient('https://store.example.com/hub.html');
storage.onConnect().then(function() {
return storage.set('newKey', 'foobar');
}).then(function() {
return storage.get('existingKey', 'newKey');
}).then(function(res) {
console.log(res.length); // 2
}).catch(function(err) {
// Handle error
});
回答by jcubic
There is simple way to use cross-domain anything, just create simple page that will be included as proxy iframehosted on domain you try to access, send PostMessageto that iframe and inside iframe you do your LocalStorage database manipulation. Here is a link to article that do this with lcoalStorage. And here is demo that send message to different page in subdomaincheck the source code, it use iframe and PostMessage.
有一个简单的方法可以使用跨域任何东西，只需创建一个简单的页面，该页面将作为代理iframe包含在您尝试访问的域上，将PostMessage发送到该 iframe 并在 iframe 内进行您的 LocalStorage 数据库操作。这是使用 lcoalStorage 执行此操作的文章的链接。这是将消息发送到子域中的不同页面的演示检查源代码，它使用 iframe 和 PostMessage。
EDIT: New version of sysend.js library(used by above demo) use BroadcastChannel if browser support it, but still it require Iframe. Recent version also simplify using of Cross-Origin messages, you have html of the iframe in repo, that you can use (or you can use simple html file with single script tag with the lib) and in parent you just need to call one function sysend.proxy('https://example.com');where example.com need to have proxy.htmlfile (you can also use your own filename and different path).
编辑：如果浏览器支持，新版本的 sysend.js 库（由上面的演示使用）使用 BroadcastChannel，但它仍然需要 Iframe。最近的版本还简化了跨源消息的使用，您在 repo 中有 iframe 的 html，您可以使用（或者您可以使用带有单个脚本标签的简单 html 文件和 lib），并且在父级中您只需要调用一个函数sysend.proxy('https://example.com');其中 example.com 需要有proxy.html文件（您也可以使用自己的文件名和不同的路径）。
回答by Mad Scientist
Google Chrome blocks localStoage access from an iFrame in another domain by default,unless 3rd party cookie is enabled and so does Safari on iPhone...the only solution seems to be opening the parent domain on a different domain and then sending to to the Child via window.postMessage but looks ugly and shifty on phones...
默认情况下，谷歌浏览器会阻止来自另一个域中 iFrame 的 localStoage 访问，除非启用了 3rd 方 cookie，iPhone 上的 Safari 也是如此……唯一的解决方案似乎是在不同域上打开父域，然后发送给子域通过 window.postMessage 但在手机上看起来又丑又狡猾...
