Fatal编程技术网
  • javascript/
  • Javascript 如何在同一时间或下次访问时使用www.为同一域创建本地存储？

Javascript 如何在同一时间或下次访问时使用www.为同一域创建本地存储？

javascript

Javascript 如何在同一时间或下次访问时使用www.为同一域创建本地存储？,javascript,Javascript,我已经创建了一个JS文件，我把它放在一些网页上，而不是我的网页上。 所以我的是domain-1.com，我把它放在domain-2.com和domain-3.com上 这个JS包含jsonp，我成功地将他们页面中的一些数据保存到了我的数据库中。另外，我创建了一些cookie，并将一个值保存到localstorage。问题是，当访问者访问domain-2.com，明天访问www.domain-2.com时，他们会有不同的价值，因为操作系统会访问www.domain-2.com 我希望这个值在整个w

我已经创建了一个JS文件，我把它放在一些网页上，而不是我的网页上。 所以我的是domain-1.com，我把它放在domain-2.com和domain-3.com上

这个JS包含jsonp，我成功地将他们页面中的一些数据保存到了我的数据库中。另外，我创建了一些cookie，并将一个值保存到localstorage。问题是，当访问者访问domain-2.com，明天访问www.domain-2.com时，他们会有不同的价值，因为操作系统会访问www.domain-2.com

我希望这个值在整个www上是相同的，或者不是，也许同时，我不知道一个适用的想法。对于我来说，最好同时传递www.的值，而不传递www

如何做到这一点？
我只为他们提供一个JS外部链接。如果我也放置一个iframe也可以。

最好的解决方案是设置一个重定向到任意一个域，这样您就可以完全避免这个问题

以下代码显示了将值发送到非www域仅用于存储的概念。如果您也需要从www域读取这些值，或者希望有一个库为您执行所有操作，您应该使用最后列出的库之一。这些库使用相同的概念，但可以为您处理大多数事情

您只能在一个域中存储值，如果您在www域中，则可以使用跨源通信发送值。创建加载非www域脚本的
iframe
。在此脚本中，您将值保存在该域的本地存储中

以下是iframe的内容，其中包含一些最小的html5标记，在本例中保存为
storage.html
，并从
example.com
提供服务

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {

    if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
        return;
    }

    localStorage.setItem(event.data.key, event.data.value);

}
</script>
</head></html>
确保将
example.com
域替换为实际域。因此其他网站无法向您发送消息

<iframe id="storageScriptFrame"></iframe>

<script>

var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;


function storeItem(key, value) {
    var message = {key: key, value: value};
    storageScriptWindow.postMessage(message, target);
}


// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {

    storeItem("foo", "bar"); 

};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html'; 

</script>
在某些时候，您还需要读取这些存储的值。根据对存储值的处理，您有两个选项

  • 如果不需要与主窗口交互，可以将读取值的脚本移动到iframe中
  • 如果确实需要在主窗口上获取值，请再次使用
    postMessage
    将值发送回
第二个选项可能会变得复杂，因为
postMessage
是异步的，并且只以一种方式工作。我建议使用现有的库来实现这一点（您不需要上面的代码）

  • 看起来很好，使用方便
  • 是否有另一个库用于此任务
例如，如果您跨域本地存储，您只需遵循
initCallback
函数，您可以调用
xdLocalStorage.getItem
和
xdLocalStorage.setItem
从
example.com
的本地存储中获取和设置项目，您为什么不创建一个iframe？：）这个有用的库帮助我解决了创建跨站点本地存储数据的问题。感谢您提供的逻辑，但我不知道如何实现这一点，请让我知道我将每个代码块放在哪里，以及将
localStorage['abc']='value'
放在哪里请为我提供完整的代码，即使是iframe，也要有+300的价值it@Xalloumokkelos我已经添加了完整的代码。现在，在查找现有的解决方案之后，我发现一些库似乎可以做同样的事情，甚至更多。这两个库似乎都有使用它们的简单说明。您好，我刚刚测试了您的代码。我注意到，当我访问
www.domain.com
时，它会为
www.domain.com
和
domain.com
上显示的
domain.com
创建一个本地存储。当我访问
domain.com
时，它不会创建任何内容。。。因此，因为我在www上读取了该值。它不显示任何内容，但当我访问
domain.com
（不带www）时会显示该值。如何修复此问题？抱歉，我忘记将
example.com
添加到源代码检查中，以便允许来自两个域的邮件。这应该可以解决这个问题，尽管我不确定你所说的“它为www.domain.com和domain.com上显示的domain.com创建本地存储”是什么意思。如果“show”的意思是“从localstorage读取值”，那就不可能了。访问任何域应仅保存到
domain.com
的本地存储。该存储只能从
domain.com
读取（这意味着它可以从iframe读取）。从
www.domain.com
读取更复杂的代码或其中一个库是可能的。 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {

    if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
        return;
    }

    localStorage.setItem(event.data.key, event.data.value);

}
</script>
</head></html>