Сохранить выбранную вкладку и загрузить ее после обновления страницы

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 для одной) или, конечно, вы можете свернуть свою собственную.