不同域名之间共享localStorage/sessionStorage

Posted 2023-05-12

参考技术A 两个不同的域名的localStorage不能直接互相访问。那么如何在 aaa.com 中如何调用 bbb.com 的localStorage?

1.在 aaa.com 的页面中，在页面中嵌入一个src为 bbb.com 的 iframe ，此时这个 iframe 里可以调用 bbb.com 的localStorage。
2.用 postMessage 方法实现页面与 iframe 之间的通信。
综合1、2便可以实现 aaa.com 中调用 bbb.com 的localStorage。

我们可以在 bbb.com 中写一个专门负责共享localStorage的页面，例如叫做 page1.html ，这样可以防止无用的资源加载到 iframe 中。

以在 aaa.com 中读取 bbb.com 中的localStorage的 item1 为例，写同理：
bbb.com 中 page1.html ，监听 aaa.com 通过 postMessage 传来的信息，读取localStorage，然后再使用 postMessage 方法传给 aaa.com 的接收者。

在 aaa.com 的页面中加入一个src为 bbb.com/page1.html 隐藏的 iframe 。

在 aaa.com 的页面中加入下面script标签。在页面加载完毕时通过 postMessage 告诉 iframe 中监听者，读取 item1 。监听 bbb.com 传回的 item1 的值并输出。

不同页面之间的互相影响-localStorage

如果需要因为一个页面的操作而改变另一个页面的内容，可以使用监听localStorage的方式。

window.addEventListener("storage", function (e) {

　　alert(e.newValue);

});

　　另保存json数据到localStorage的方法，先转化字符串

JSON.stringify(obj)，取出时在转化为json--JSON.parse(obj）；

同一个页面监听变化

 var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this,arguments);
    }
    window.addEventListener("setItemEvent", function (e) {
        alert(e.newValue);
    });
    localStorage.setItem("nm","1234");