Question 36735 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to keep active tab after page refresh with sessionStorage – Jquery

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>
Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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!

    Login or Signup to reply.
  5. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search