How to keep active tab after page refresh with sessionStorage

Observation : As per your current code, Looks like you are triggering a click() event on element which containing an id defaultOpen every time page loads.

Solution : This logic needs to be changed. We can achieve this requirement by using Web storage API by checking if there is any currentTab variable available in local storage or not, If available load that tab else run this default click event logic.

Now the steps will be :

• Set the localStorage value inside openCity() method.

  localStorage.setItem('currentTab', cityName);
  

• Check if there is any currentTab variable exist in local storage or not.

  const currentTab = localStorage.getItem('currentTab');
  

• Now add the below condition.

  if (currentTab) {
    document.getElementById(currentTab).click();
  } else {
    document.getElementByName("defaultOpen").click();
  }
  

Live Demo (Due to security reasons, window.localStorage is not working in below code snippet but it will work fine locally or in jsfiddle) :

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  localStorage.setItem('currentTab', cityName);
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementsByClassName(cityName)[0].style.display = "block";
  evt.currentTarget.className += " active";
}

const currentTab = localStorage.getItem('currentTab');
if (currentTab) {
  document.getElementById(currentTab).click();
} else {
  document.getElementsByClassName("tablinks")[0].click();
}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

<div class="tab">
  <button class="tablinks" id="London" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" id="Paris" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" id="Tokyo" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div class="tabcontent London">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div class="tabcontent Paris">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div class="tabcontent Tokyo">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

You could add something like

localStorage.setItem('currentCity', cityName);

to your openCity() function which will write the current tab id to localStorage. Then, on the page load, read from localStorage:

const defaultOpen = localStorage.getItem('currentCity') || 'London';

Alternatively, you could look at using URL for state management, for example appending currentCity to the URL and reading from it on load.

If you really want to use localStorage (which is probably not the best approach, as pointed out, using some hash params looks 'better'), here is a proposal with minimal modification that could enable what you want

1- store the last selected city in the local storage when openCity is called

openCity() {
  ...
  window.localStorage.setItem('SAMPLE_SITE_CITY', cityName)
}

2- Add some script to be executed when the page opens where you will: read the value from the local storage; find the corresponding DOM element and trigger selection on it (and handle the case where nothing is stored by simply selecting the default select like you were doing before):

const previousCity = window.localStorage.getItem('SAMPLE_SITE_CITY');
if (previousCity) {
  const xpath = `//button[text()='${previousCity}']`;
  const elem = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  elem.click();
} else {
  document.getElementById("defaultOpen").click();
}

Note: adding an 'id' to your buttons and storing the id in the local storage would easen the retrieval of the last selected element.

you can find a working sample on this code pen: https://codepen.io/aSH-uncover/pen/qBYaZOB

You will need to use local storage for this.

localStorage.setItem('currentCity', cityName);

When page loads, get cityName from local storage with

const defaultOpen = localStorage.getItem('currentCity');

Hope it helps!

1. when open city method is called at that time we need to store last selected city in local storage

   window.localStorage.setItem('CurrnetCityName', cityName);
   

2. when page load get the current city name from local store and add

   const defaultOpen = localStorage.getItem('CurrnetCityName');
   

Hope it will help for you!