如何在多个浏览器标签 JavaScript 之间共享 sessionStorage？答案

【问题标题】：How to share sessionStorage between multiple browser tabs JavaScript?如何在多个浏览器标签 JavaScript 之间共享 sessionStorage？
【发布时间】：2021-10-06 14:40:52
【问题描述】：

我是在客户端存储数据的新手。我已经实现了 onkeyup 搜索功能。从那里我试图从 AJAX 获取城市名称并设置该城市名称应显示在页面顶部的内部标题中。所以为了存储城市名称，我使用了 sessionStorage。我成功实现了它，但问题是在新选项卡中打开该链接时它不保留会话。 所以我只想知道有没有办法在多个选项卡之间共享会话并在打开时在所有选项卡中显示相同的值。

下面是我为城市设置和获取 sessionStorage 的脚本：

function addcity() {
            var citydata = [], searchcity = "";
            var cityid = document.getElementById('hcity').value;
            var cityname = document.getElementById('forsearchcity').value;
            if(cityid != null && cityname != null) {
                searchcity = {cityid : cityid, cityname : cityname};
                citydata.push(searchcity);
            }
            var city = sessionStorage.setItem("city", JSON.stringify(citydata));
        } 
function getcity() {
        var city = sessionStorage.getItem("city");
        var citydata = JSON.parse(city);
        var id = "", name = "", div = "";
        if(citydata != null && citydata.length != 0) {
            for(var i = 0; i < citydata.length; i++) {
                id = citydata[i].cityid;
                name = citydata[i].cityname;
                if(name != null) {
                    div = div + "<div id='user-selected-city-input'>"
                                    +"<a href='<%=WebUrl.searchcity%>'>"
                                    +"<h6>Delivery In</h6>"
                                    +"<h5 style=\"color: #330000;\">"+name+"</h5>"
                                    +"</a>"
                                +"</div>";
                }
            }
        }else{
                div = div + "<div id='user-selected-city-input'>"
                                +"<a href='<%=WebUrl.searchcity%>'>"
                                +"<h6>Delivery In</h6>"
                                +"<h6 style=\"color: black;\">Choose City</h6>"
                                +"</a>"
                            +"</div>";
        }
        document.getElementById("city_pop").innerHTML = div;
    }

任何建议都会有所帮助。

【问题讨论】：

在新标签页中打开该链接时不会保留会话。每当在浏览器的特定选项卡中加载文档时，都会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。 MDN.
是的，但是我希望所有选项卡都可以使用该选项卡，因为有人会打开相同的选项卡。这样他/她就能看到他/她选择的城市。
然后你可以使用localStorage 和sessionStorage 和StorageEvent 来同步存储之间的变化。或者使用Broadcast Channel API 在选项卡之间发送数据。但是您必须使用后者为 Safari 创建一个后备。

标签： javascript spring-boot jsp local-storage session-storage

【解决方案1】：

您可以尝试将东西放入localstorage 并为存储事件设置事件侦听器。然后，如果需要，您可以将内容复制到另一个选项卡的sessionstorage。 https://html.spec.whatwg.org/multipage/webstorage.html#the-storageevent-interface

【讨论】：