I have several tabs in html / js, in each of these I have a form with the save change button, when I click on the save changes button the page is refreshaled. After the refresh page, the tab returns to the first item, while it should remain the same for the last time.

Is there any way to do this ?

I was thinking about localstorage but I'm not sure how to do it, can someone point me the right way ?

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  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.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").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" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

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

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

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

I have several tabs in html / js, in each of these I have a form with the save change button, when I click on the save changes button the page is refreshaled. After the refresh page, the tab returns to the first item, while it should remain the same for the last time.

Is there any way to do this ?

I was thinking about localstorage but I'm not sure how to do it, can someone point me the right way ?

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  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.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").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" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

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

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

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

• javascript
• html
• jquery
• tabs
• local-storage

• "Is there any way to do this?" isn't a good question for SO. Of course there is. What problem do you have doing so? Please revise to ask something more specific. – isherwood Commented Sep 7, 2022 at 21:22
• you could point your links to something like yoursite./page/#London yoursite./page/#Paris ... and then access the URL fragment using URL.hash developer.mozilla/en-US/docs/Web/API/URL/hash – GrafiCode Commented Sep 7, 2022 at 21:23
• Hi , @snorlax there is already answer given by Georgy Malanichev for this so what is needed other then that ? – Swati Commented Sep 12, 2022 at 16:11
• Thanks for the ment. I didn't understand very well how to implement that answer in my code, I'm new to this, my fault. But beyond this I was looking for a solution with sessionStorage and not with localStorage, this is because when you open the browser next time and then the page, you will start from the first tab. – Snorlax Commented Sep 12, 2022 at 18:06

5 Answers 5

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>

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 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.

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!