如何利用sessionStorage让输入框保持禁用状态，刷新后不恢复？

修改后的完整代码 #

HTML 代码

<input id="firstname"></input>
<input id="lastname"></input>
<input id="email"></input>

<button type="button" class="dropdown-item" id="status">Disable</button>

JavaScript 代码

// 获取所有需要控制的输入框和按钮
const inputs = document.querySelectorAll('#firstname, #lastname, #email');
const toggleBtn = document.getElementById('status');

// 页面加载时恢复状态
function restoreState() {
  // 从sessionStorage读取状态，默认未禁用（false）
  const isDisabled = sessionStorage.getItem('disableInputs') === 'true';
  
  // 设置输入框的禁用状态
  inputs.forEach(input => input.disabled = isDisabled);
  // 设置按钮文字
  toggleBtn.textContent = isDisabled ? 'Enable' : 'Disable';
}

// 切换输入框状态的函数
function toggleInputStatus() {
  // 获取当前状态并反转
  const currentDisabled = sessionStorage.getItem('disableInputs') === 'true';
  const newDisabled = !currentDisabled;
  
  // 更新sessionStorage
  sessionStorage.setItem('disableInputs', newDisabled.toString());
  
  // 更新输入框和按钮状态
  inputs.forEach(input => input.disabled = newDisabled);
  toggleBtn.textContent = newDisabled ? 'Enable' : 'Disable';
}

// 页面加载时恢复状态
restoreState();
// 绑定按钮点击事件
toggleBtn.addEventListener('click', toggleInputStatus);

关键修改点说明 #

• 按钮文字修正：原来的代码错误使用elem.value获取按钮文字，改为textContent，这才是按钮实际显示的文本内容。
• 状态切换逻辑：新增状态反转逻辑，点击按钮时会根据当前状态切换启用/禁用，而不是只固定设置为禁用。
• 页面加载时的状态恢复：单独编写restoreState函数，在页面加载时读取sessionStorage存储的状态，同步设置输入框禁用状态和按钮文字，确保刷新后状态保留。
• 优化元素获取：用querySelectorAll一次性获取所有需要控制的输入框，简化代码结构。

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