如何在同一时间或下次访问时使用www.为同一域创建localStorage

How to create localStorage for the same domain with www. at the same time or at the next visit?

本文关键字：www localStorage 创建 同一时间 下次 访问      更新时间：2023-09-26

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

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

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

如何做到这一点？我只为他们提供了一个JS外部链接。如果我也放一个iframe也没关系。

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

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

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

以下是带有一些最小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域替换为实际域。检查源域很重要，这样其他网站就无法向您发送消息。

在某个时刻，您还需要读取那些存储的值。根据您对存储值的处理方式，您有两个选项。

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

第二个选项可能会变得复杂，因为postMessage是异步的，只能以一种方式工作。我建议使用现有的库来完成这项工作（那时您不需要上面的代码）。

  • 跨域本地存储看起来不错且易于使用
  • localStorage工具是此任务的另一个库

例如，如果跨域本地存储，您只需按照设置说明进行操作，并且在initCallback函数中，您可以调用xdLocalStorage.getItem和xdLocalStorage.setItem从example.com的本地存储中获取和设置项目。

相关文章：