如何刷新页面后仍保持输入字段处于禁用状态？

嘿，这个问题我太熟啦！你现在遇到的核心问题是：JavaScript设置的禁用状态只保存在当前页面的内存会话里，一旦刷新页面，浏览器会重新加载所有资源，之前的状态就直接丢失了。要解决这个，咱们得把「是否禁用字段」的状态持久化存起来，下面给你几个实用的方案：

这个方案会把状态存在用户的浏览器里，除非用户主动清除浏览器缓存，否则状态会一直保留。

具体代码修改如下：

// 点击按钮时：禁用字段 + 保存状态
document.getElementById('myButton').onclick = function() {
  // 批量禁用字段，比逐个写更简洁
  const targetFields = ['firstname', 'lastname', 'email'];
  targetFields.forEach(fieldId => {
    document.getElementById(fieldId).disabled = true;
  });
  // 把禁用状态存入localStorage
  localStorage.setItem('formFieldsDisabled', 'true');
};

// 页面加载时：检查存储的状态，恢复禁用
window.addEventListener('load', function() {
  const isDisabled = localStorage.getItem('formFieldsDisabled');
  if (isDisabled === 'true') {
    const targetFields = ['firstname', 'lastname', 'email'];
    targetFields.forEach(fieldId => {
      document.getElementById(fieldId).disabled = true;
    });
  }
});

如果之后需要恢复字段的可编辑状态，记得调用 localStorage.removeItem('formFieldsDisabled') 清除存储的状态哦。

和 localStorage 逻辑差不多，但数据只在当前浏览器会话有效——关闭浏览器窗口后，状态就会自动清除，适合不需要长期保存禁用状态的场景：

// 点击按钮时
document.getElementById('myButton').onclick = function() {
  const targetFields = ['firstname', 'lastname', 'email'];
  targetFields.forEach(fieldId => {
    document.getElementById(fieldId).disabled = true;
  });
  sessionStorage.setItem('formFieldsDisabled', 'true');
};

// 页面加载时
window.addEventListener('load', function() {
  const isDisabled = sessionStorage.getItem('formFieldsDisabled');
  if (isDisabled === 'true') {
    const targetFields = ['firstname', 'lastname', 'email'];
    targetFields.forEach(fieldId => {
      document.getElementById(fieldId).disabled = true;
    });
  }
});

如果需要确保禁用状态在多设备、不同浏览器会话中都能生效，或者状态需要和用户账号绑定，那最好把「表单是否已提交/需要禁用」的状态存在后端数据库里：

1. 用户提交表单时，后端接口除了处理表单数据，还要给该用户标记「表单已提交」的状态
2. 页面加载时，先请求后端接口获取这个状态，根据返回值决定是否禁用字段

示例代码（假设后端有一个检查状态的接口）：

window.addEventListener('load', async function() {
  // 调用后端接口获取状态
  try {
    const response = await fetch('/api/check-form-status');
    const statusData = await response.json();
    if (statusData.isSubmitted) {
      const targetFields = ['firstname', 'lastname', 'email'];
      targetFields.forEach(fieldId => {
        document.getElementById(fieldId).disabled = true;
      });
    }
  } catch (err) {
    console.error('获取状态失败:', err);
  }
});

你可以根据自己的需求选对应的方案：只是单会话临时禁用选Session Storage，需要长期保留选localStorage，要跨设备或更可靠就用后端存储~

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