存储当前选定的选项卡，并在页面刷新后加载它

Question

标签的代码如下：

(function() {
  $(function() {
    var toggle;
    return toggle = new Toggle('.toggle');
  });

  this.Toggle = (function() {
    Toggle.prototype.el = null;

    Toggle.prototype.tabs = null;

    Toggle.prototype.panels = null;

    function Toggle(toggleClass) {
      this.el = $(toggleClass);
      this.tabs = this.el.find(".tab");
      this.panels = this.el.find(".panel");
      this.bind();
    }

    Toggle.prototype.show = function(index) {
      var activePanel, activeTab;
      this.tabs.removeClass('active');
      activeTab = this.tabs.get(index);
      $(activeTab).addClass('active');
      this.panels.hide();
      activePanel = this.panels.get(index);
      return $(activePanel).show();
    };

    Toggle.prototype.bind = function() {
      var _this = this;
      return this.tabs.unbind('click').bind('click', function(e) {
        return _this.show($(e.currentTarget).index());
      });
    };

    return Toggle;

  })();

}).call(this);

.toggle {
  font-family: arial, sans-serif;
}
.toggle .tabs {
  border-bottom: 1px solid grey;
  width: 100%;
  overflow: hidden;
  height: 36px;
  line-height: 36px;
}
.toggle .tabs .tab {
  float: left;
  background: white;
  color: #777777;
  height: 31px;
  margin: 2px 8px 0;
  padding: 0 8px;
  cursor: pointer;
}
.toggle .tabs .tab.active {
  color: #dd4b39;
  border-bottom: 3px solid #dd4b39;
}
.toggle .panels .panel {
  padding: 20px 10px;
  display: none;
}
.toggle .panels .panel:first-child {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle'>
  <div class='tabs'>
    <div class='tab active'>Tab 1</div>
    <div class='tab'>Tab 2</div>
    <div class='tab'>Tab 3</div>
    <div class='tab'>Tab 4</div>
  </div>
  <div class='panels'>
    <div class='panel'>Panel 1</div>
    <div class='panel'>Panel 2</div>
    <div class='panel'>Panel 3</div>
    <div class='panel'>Panel 4</div>
  </div>
</div>

如您所见，上面的代码工作正常。...我唯一要添加的功能是能够存储当前选定的选项卡，并且如果用户刷新/重新加载页面，我希望包含相同的选项卡而不是当前的第一个标签。

要实现此目的，我需要在上面的代码中添加什么？

Answer 1

有多种方法可以在页面访问之间“保存”信息。

过去（因此更广泛地受浏览器支持）的方法是使用cookie！我确定您已经听说过它们：-）

第二种更现代的方法是使用本地存储。有很多库可以帮助您管理本地存储（为localForage搜索），当然也可以汇总自己的库。