如何在重新加载浏览器后保留在选定的切换按钮/页中

Question

我有以下的工作代码，当第一次打开或重新加载页面时，菜单-1/content-1是默认的。但是，我想知道是否有一种在重新加载浏览器后仍保留在所选菜单/内容中的方法，也就是说，如果我单击了菜单-2并重新加载了我的浏览器，那么我仍然在菜单-2上，如果我选择了其他的话，也是一样的。

这有可能吗？

提前感谢您的建议！

P.S.：这是我的CodePen，以防你觉得更容易：https://codepen.io/fergos2/pen/vYYaRzN

​

$(document).ready(function() {
  
  // only show menu-1
  $('.menu-1').click(function() {
    if ($('.menu-2, .menu-3').hasClass('active')) {
      $('.menu-2, .menu-3').removeClass('active');
			$('.content-2, .content-3').removeClass('active');
    }
    
    $('.menu-1').addClass('active');
    $('.content-1').addClass('active'); 
  });
  
  // only show menu-2
    $('.menu-2').click(function() {
    if ($('.menu-1, .menu-3').hasClass('active')) {
      $('.menu-1, .menu-3').removeClass('active');
			$('.content-1, .content-3').removeClass('active');
    }
    
    $('.menu-2').addClass('active');
    $('.content-2').addClass('active'); 
  });
  
  // only show menu-3
    $('.menu-3').click(function() {
    if ($('.menu-2, .menu-1').hasClass('active')) {
      $('.menu-2, .menu-1').removeClass('active');
			$('.content-2, .content-1').removeClass('active');
    }
    
    $('.menu-3').addClass('active');
    $('.content-3').addClass('active'); 
  });  
});

.container {
  margin: 0 auto;
  background-color: #eee;
  border: 1px solid lightgrey;
  width: 20vw;
  height: 90vh;
  font-family: sans-serif;
  
  position: relative;
}

header {
  background-color: lightgreen;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

.bottom-navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
  background-color: lightgreen;
  border-top: 1px solid var(--color-grey-dark-3);
  z-index: 50;

  display: flex;
  justify-content: space-between;
  
      > a {
      display: block;
      color: green;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      padding: 0 10px;

      &.active {
        color: black;
      }
    }
}

.menu-1.active,
.menu-2.active,
.menu-3.active {
  color: black;
}

.content-1,
.content-2,
.content-3 {
  display: none;
}

.content-1.active,
.content-2.active,
.content-3.active {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <header>My header</header>
  <div class="main-content">
    <div class="content-1 active">House content</div>
    <div class="content-2">Map content</div>
    <div class="content-3">Explore content</div>
  <div class="bottom-navbar">
    <a href="#" class="menu-1 active"><i class="fa fa-home"></i></a>
    <a href="#" class="menu-2"><i class="fa fa-map"></i></a>
    <a href="#" class="menu-3"><i class="fa fa-search"></i></a>
  </div>
</div>

​

更新

按照建议，我尝试了URL#并减少了重复次数。到目前为止，我已经接近实现我想要的结果，但还没有实现。当我单击任何菜单图标时，下面的代码显示一个空内容。但是，当我重新加载页面时，它确实显示了我所在的菜单的内容。这是迄今取得的进展：

$(document).ready(function() {

  $("a[class^=menu]").click(function() {
    if ($("a[class^=menu],div[class^=content]").hasClass("active")) {

      $("a[class^=menu],div[class^=content]").removeClass("active");

      var href = $(this).attr("href");

      $(this).addClass("active");
      $(href).addClass("active");
    }
  });

  if (window.location.hash.substr(1) != "") {
    $("a[class^=menu],div[class^=content]").removeClass("active");
    $('a[href="' + window.location.hash.substr(1) + '"]').addClass("active");
    $("#" + window.location.hash.substr(1)).addClass("active");
  }

});

Answer 1

有三种方法可以这样做：

1.每次单击/更改菜单时使用URL中的#hash：，在URL中设置一个哈希(例如www.yoursite.com#menu1)。然后每次加载页面时读取当前哈希，如果URL中有散列，则设置菜单。

注意:如果用户关闭浏览器并稍后返回，或者使用另一台机器，用户将不会看到先前选择的菜单。只有当单击浏览器的刷新( F5按下)时，用户才会看到先前选择的菜单。

2.本地存储或cookie:存储并更新本地存储或cookie中的当前选择。然后在加载时，阅读本地存储或Cookie，以决定显示哪个菜单。本地存储位于用户的当前浏览器中，并将一直保存到您或客户端删除它为止。这意味着每次用户回来时，他们都会看到先前选择的菜单。

注1:可以将cookie设置为在浏览器关闭时过期，这样，如果用户关闭并打开浏览器，他们将不会看到先前选择的菜单。

注2:如果用户使用不同的机器或浏览器返回，他们将不会被记住菜单。

3.服务器端存储：如果希望在浏览器和计算机之间永久地存储用户的当前状态，则应该将所选内容存储在服务器端(数据库或文件)。

注意:用户必须登录才能成功地识别他们，这可能是不可取的。

因此，根据您的问题和评论，建议选择1。或选项2，其cookie在浏览器关闭时过期。

这是一篇推动你朝这个方向前进的文章。

Answer 2

一种方法是将所选内容保存在本地存储或会话存储中，并在浏览器重新加载时读取。由于浏览器重新加载将重新呈现应用程序完全从一开始，我没有想到任何其他选择。