如何在重新加载页面后在Jquery中保持当前选项卡处于活动状态

<div class="tabs">
  <div class="tab" id="tab1">选项卡1</div>
  <div class="tab" id="tab2">选项卡2</div>
  <div class="tab" id="tab3">选项卡3</div>
</div>

.tab {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab.active {
  background-color: #f00;
}

$(document).ready(function() {
  // 获取之前选中的选项卡标识符
  var activeTab = localStorage.getItem('activeTab');
  
  // 如果存在之前选中的选项卡，则将其设置为活动状态
  if (activeTab) {
    $('#' + activeTab).addClass('active');
  }
  
  // 选项卡点击事件处理程序
  $('.tab').click(function() {
    // 移除之前选中的选项卡的活动状态
    $('.tab').removeClass('active');
    
    // 将当前选中的选项卡设置为活动状态
    $(this).addClass('active');
    
    // 将当前选中的选项卡标识符存储在本地存储中
    var activeTab = $(this).attr('id');
    localStorage.setItem('activeTab', activeTab);
  });
});