如何在多个浏览器选项卡 JavaScript 之间共享 sessionStorage？

Question

我是在客户端存储数据的新手。我已经实现了 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;
    } 

任何建议都会有所帮助。

Answer 1

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