如何让标记为active的激活元素在页面刷新后仍保持激活状态

原有代码的激活状态仅保存在页面运行时内存中，页面刷新后内存数据被重置，所以状态会消失。我们可以借助浏览器的localStorage本地存储能力持久化保存激活状态，实现刷新后状态自动恢复。

修改后的完整代码 #

HTML 代码 #

<h1>激活按钮效果</h1>
<p>高亮当前选中/点击的按钮</p>

<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

CSS 代码（原有逻辑无修改） #

/* 按钮基础样式 */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* 激活状态、鼠标悬停样式 */
.active,
.btn:hover {
  background-color: #666;
  color: white;
}

调整后的 JS 代码 #

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");

// 页面加载时读取存储值，恢复激活状态
window.addEventListener('load', function() {
  var activeIndex = localStorage.getItem('activeBtnIndex');
  // 存在存储值且对应按钮存在时，恢复激活状态
  if(activeIndex !== null && btns[activeIndex]) {
    for(var j = 0; j < btns.length; j++) {
      btns[j].classList.remove('active');
    }
    btns[activeIndex].classList.add('active');
  }
})

// 绑定按钮点击事件
for (var i = 0; i < btns.length; i++) {
  // 给每个按钮标记索引
  btns[i].dataset.index = i;
  btns[i].addEventListener("click", function() {
    // 清除原有激活状态
    var current = document.getElementsByClassName("active");
    current[0].classList.remove("active");
    // 给当前点击按钮添加激活状态
    this.classList.add("active");
    // 将激活按钮索引存入本地存储
    localStorage.setItem('activeBtnIndex', this.dataset.index);
  });
}

补充说明 #

• 方案使用classList操作类名，比直接修改className容错性更高，不会出现类名误删、重复的问题
• 如果需要关闭浏览器后就清除激活状态，可以把localStorage替换为sessionStorage，调用方法完全一致，仅存储生命周期不同
• 本地存储的值仅保存在用户当前浏览器中，清除浏览器缓存后存储数据会失效

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