如何用localStorage实现页面刷新后保留激活tab状态？现有jQuery代码如何适配？

改造实现代码 #

直接基于你的现有逻辑扩展，只需要加「点击存状态」和「初始化读状态」两处逻辑即可：

// 页面DOM加载完成后执行
$(document).ready(function() {
  // ========== 初始化：读取本地存储的激活tab ==========
  // 先获取所有合法的tab id，避免存储的id过期无效
  const allTabIds = $('div>a').map(function() {
    return $(this).attr('id')
  }).get()
  // 读本地存储，没有存储值/存储值无效时默认取第一个tab
  const savedTabId = localStorage.getItem('active_tab_id')
  const activeTabId = allTabIds.includes(savedTabId) ? savedTabId : allTabIds[0]
  // 激活对应tab的内容区
  $('.main.container>section').removeClass('active')
  $('.main.container>section.' + activeTabId).addClass('active')

  // ========== tab点击事件 ==========
  $('div>a').click(function() {
    const currentTabId = $(this).attr('id')
    console.log(currentTabId)
    // 切换内容区激活状态
    $('.main.container>section').removeClass('active')
    $('.main.container>section.' + currentTabId).addClass('active')
    // 把当前激活的tab id存入localStorage
    localStorage.setItem('active_tab_id', currentTabId)
  })
})

补充说明 #

• localStorage是浏览器提供的持久化本地存储，存储的内容会保留到用户手动清理浏览器缓存/主动删除存储项为止
• 代码里加了合法id校验逻辑，就算你后续修改了tab的id值，也不会出现找不到对应内容区的异常，会自动回退到第一个tab作为默认值

内容的提问来源于stack exchange，提问作者TJKim