如何在bootstrap 4.5.2中重新加载页面时保留当前活动选项卡

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="tab1" data-toggle="tab" href="#content1">选项卡1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2" data-toggle="tab" href="#content2">选项卡2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab3" data-toggle="tab" href="#content3">选项卡3</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="content1">
    内容1
  </div>
  <div class="tab-pane fade" id="content2">
    内容2
  </div>
  <div class="tab-pane fade" id="content3">
    内容3
  </div>
</div>

$(document).ready(function(){
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
  }
});

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  var activeTab = $(e.target).attr('href');
  localStorage.setItem('activeTab', activeTab);
});