如何用LocalStorage存储按钮状态，避免页面刷新后状态重置？

核心思路 #

通过localStorage持久化存储按钮的状态，页面加载时读取存储的状态恢复按钮类名，点击按钮切换状态时同步更新存储内容。

实现步骤 #

1. 页面初始化恢复状态
   页面加载完成后，从localStorage中读取act2Status字段：

   • 如果存在值且为enable，则给Act2按钮添加enable类、移除disable类；
   • 如果不存在或为disable，则保持初始的disable类。

2. 点击事件同步存储状态
   点击Act1按钮切换Act2的类时，同步将当前状态（enable或disable）写入localStorage。

完整代码示例 #

HTML部分

<button id="Act1">激活按钮2</button>
<button id="Act2" class="disable">按钮2</button>

JavaScript部分

// 页面加载完成后恢复状态
document.addEventListener('DOMContentLoaded', function() {
  const act2Btn = document.getElementById('Act2');
  const savedStatus = localStorage.getItem('act2Status');
  
  if (savedStatus === 'enable') {
    act2Btn.classList.remove('disable');
    act2Btn.classList.add('enable');
  } else {
    act2Btn.classList.remove('enable');
    act2Btn.classList.add('disable');
  }
});

// Act1按钮点击事件
document.getElementById('Act1').addEventListener('click', function() {
  const act2Btn = document.getElementById('Act2');
  let currentStatus;
  
  // 切换类名
  if (act2Btn.classList.contains('disable')) {
    act2Btn.classList.remove('disable');
    act2Btn.classList.add('enable');
    currentStatus = 'enable';
  } else {
    act2Btn.classList.remove('enable');
    act2Btn.classList.add('disable');
    currentStatus = 'disable';
  }
  
  // 保存状态到localStorage
  localStorage.setItem('act2Status', currentStatus);
});

补充说明 #

• localStorage存储的内容会持久保存在浏览器中，除非手动清除或通过代码删除；
• 如果需要清除保存的状态，可以执行localStorage.removeItem('act2Status')；
• 类名切换逻辑可简化（若两个类互斥）：

  // 简化的类切换写法
  act2Btn.classList.toggle('disable');
  act2Btn.classList.toggle('enable');
  currentStatus = act2Btn.classList.contains('enable') ? 'enable' : 'disable';
  

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