javascript - 如何为与 www 相同的域创建 localStorage。同时还是下次访问?

标签 javascript

我创建了一个 JS 文件,并将其放置在我以外的其他网页中。 所以我的是 domain-1.com,我把它放到 domain-2.com 和 domain-3.com

这个 JS 包含 jsonp,我成功地将一些数据从他们的页面保存到我的数据库中。此外,我创建了一些 cookie 并将值保存到本地存储。问题是,当访问者访问 domain-2.com 并且明天访问 www.domain-2.com 时,他们将具有不同的值,因为 os 是 www.

我希望这个值在整个 www.与否,也许同时,我不知道一个适用的想法。我最好同时为 www 传递值。并且没有 www.

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

最佳答案

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

以下代码展示了将值发送到非 www 域以仅供存储的概念。如果您也需要从 www 域中读取这些值,或者想要一个库为您做所有事情,您应该使用最后列出的库之一。 这些库使用相同的概念,但会处理大多数事情你。


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

这是带有一些最小 html5 标记的 iframe 的内容,在此示例中保存为 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>

当你想存储数据时,使用 postMessage 与 iframe 通信。需要先加载 iframe,然后才能发送消息。

<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>

确保将 example.com 域替换为实际域。 Checking the origin domain is important这样其他站点就无法向您发送消息。


在某些时候,您还想读取这些存储的值。根据您对存储值的处理方式,您有两种选择。

  • 如果您不需要与主窗口交互,您可以将读取值的脚本移动到 iframe 中。
  • 如果您确实需要在主窗口中获取值,请再次使用 postMessage 发送回值。

第二个选项可能会变得复杂,因为 postMessage 是异步的并且只能以一种方式工作。我建议使用现有的库来执行此操作(那时您不需要上面的代码)。

例如,如果您跨域本地存储,您只需遵循 the setup instructionsinitCallback 函数中,您可以调用 xdLocalStorage.getItemxdLocalStorage.setItemexample 的本地存储中获取和设置项目。 com.

关于javascript - 如何为与 www 相同的域创建 localStorage。同时还是下次访问?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25604754/

相关文章:

javascript - Threejs 给圆柱体着色

javascript - 使用greasemonkey在表格前添加HTML

javascript - Bootstrap 4 pills 点击内容显示在下方和/或不显示

javascript - 单击链接时如何在特定div中添加文本

javascript - Google Charts 折线图中 a 轴上的日期

javascript - VBScript chr() 似乎返回错误值

javascript - 脚本夏普 : Uncaught TypeError: Object #<HTMLInputElement> has no method 'apply'

javascript - 如何在 JavaScript 中制作大小写按钮?

javascript - 如何阻止恶意代码欺骗 "Origin" header 以利用 CORS?

javascript - Gulp Watch Task 不适用于 SASS