I have recently started exploring client-side data storage and have successfully implemented an onkeyup search function. The goal is to retrieve the city name via AJAX and display it at the top within the header of the page. To store the city name, I have utilized sessionStorage. However, I noticed that the session does not persist when opening the link in a new tab. Is there a way to synchronize the session across multiple tabs so that the same value is displayed in all opened tabs?
Below is the script I use to set and retrieve the city from the 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;
}
I would appreciate any suggestions or advice.