Javascript 我需要知道在刷新浏览器时，当HTML、CSS和JS中有默认选项卡时，如何保持退出导航选项卡内容

我创建了一个包含四个选项卡的HTML页面，其中包括一个默认选项卡，该默认选项卡中包含详细信息。但是当我在另一个选项卡中时，我刷新了页面，并返回了默认选项卡内容。 但是我需要创建我的页面，当我在非默认选项卡上刷新页面时，我需要保持相同的选项卡。 这是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>

---

我在www.w3schools.com网站上了解了此代码。请帮助我解决此问题…

您需要一种方法让页面“记住”刷新时正在查看的选项卡，因为默认设置是页面默认呈现的内容。有很多方法可以实现这一点，特别是如果您使用的是像php这样的服务器端语言。因为我在代码中看到的只是javascript，所以您可以尝试查看localstorage或sessionstorage，看看哪一个对您尝试执行的操作更有意义。您需要一种方法让页面“记住”刷新时正在查看的选项卡，因为默认值是页面默认呈现的内容。有很多方法可以实现这一点，特别是如果您使用的是像php这样的服务器端语言。因为我在代码中看到的只是javascript，所以您可以尝试查看localstorage或sessionstorage，看看哪一个对您尝试执行的操作更有意义。

#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%;
}