Мне нужно знать, как продолжать выходить из содержимого вкладки навигации при обновлении sh браузера, когда есть вкладка по умолчанию в HTML, CSS, JS

Question

Я создал страницу HTML с четырьмя вкладками, включая одну вкладку по умолчанию со сведениями в этой вкладке по умолчанию. Но когда я был на другой вкладке, я обновил страницу, и ей вернули содержимое вкладки по умолчанию. Но мне нужно создать свою страницу, когда я обновляю sh страницу на вкладке не по умолчанию, мне нужно оставаться на той же вкладке. Это код html.

<nav id="navBar">
        <button id="defaultOpen" class="tablink" onclick="openPage('Home',this);" style="margin-left: 100px">Home</button>
        <button class="tablink" onclick="openPage('Map',this);">Map</button>
        <button class="tablink" onclick="openPage('About',this);">About Us</button>
        <button class="tablink" onclick="openPage('Contact',this);">Contact Us</button>
    </nav>

    <div id="Home" class="tabcontent">
        <h3>This is home</h3>
        <p>welcome to the home</p>
    </div>
    <div id="Map" class="tabcontent">
        <h3>This is Map</h3>
    </div>
    <div id="About" class="tabcontent">
        <h3>This is About</h3>
    </div>
    <div id="Contact" class="tabcontent">
        <h3>This is contact</h3>
    </div>
<script>
function openPage(pageName,elmnt) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = '#2f3542';
}
document.getElementById("defaultOpen").click();
</script>

Вот моя таблица стилей

#navBar{
    background-color: #555;
    overflow: hidden;
    border: none;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
}
.tablink{
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding:14px 16px;
    font-size: 17px;
}
.tablink:hover{
    background-color: #777;
}
.tabcontent{
    color: white;
    display: none;
    padding: 100px 20px;
    height: 100%;
}

Я узнал этот код на сайте www.w3schools.com. Пожалуйста, помогите мне решить эту проблему ...