如何用localStorage存取getID值赋值表单字段并清除存储

变量声明适配 #

getID += final_collected_id || '' 写法如果没有提前声明getID，非严格模式下会自动创建全局变量可正常读取，严格模式下会直接抛出引用错误。稳妥写法是提前初始化变量，兼容所有运行场景：

// 初始化变量，避免隐式全局变量污染或严格模式报错
let getID = '';
// 原有ID生成逻辑保持不变
getID += final_collected_id || '';

localStorage 全流程操作 #

• 值存储：校验值有效性后再写入，避免存入空值或异常内容

// 仅当ID为有效非空值时写入
if (getID?.trim()) {
  // 自定义存储key名，避免和同域名下其他业务存储冲突
  localStorage.setItem('form_collected_id', getID.trim());
}

• 值读取与表单赋值：此前写入不生效基本是DOM未加载完成就执行赋值、自定义组件未触发更新事件、选择器匹配失败三个原因，正确写法如下：

// 等待DOM完全渲染完成后再执行赋值，避免找不到表单元素
document.addEventListener('DOMContentLoaded', () => {
  const storedID = localStorage.getItem('form_collected_id');
  if (!storedID) return;

  // 替换为你实际的表单字段选择器，支持id、class、name属性等选择规则
  const idField = document.querySelector('#target-id-input');
  if (!idField) return;

  // 原生input/textarea字段直接赋值value
  if (idField.tagName === 'INPUT' || idField.tagName === 'TEXTAREA') {
    idField.value = storedID;
    // 触发input事件，适配带自定义样式的封装组件，解决赋值后组件不识别值的问题
    idField.dispatchEvent(new Event('input', { bubbles: true }));
  } 
  // 适配contenteditable实现的自定义输入框
  else if (idField.isContentEditable) {
    idField.innerText = storedID;
  }
});

• 存储清除：业务操作完成后删除对应存储即可，不要直接调用localStorage.clear()，避免误删同域名下其他业务的本地存储数据

// 在表单提交、操作完成的回调函数中执行
const clearStoredID = () => {
  localStorage.removeItem('form_collected_id');
}

异常排查点 #

如果赋值仍不生效，按以下顺序检查：

• 确认表单字段选择器是否正确，可以在控制台打印选中的元素，看是否拿到预期DOM节点
• 确认页面没有禁用localStorage（比如部分隐私浏览模式下storage会被限制写入），可提前做可用性校验
• 如果是Vue/React等框架渲染的表单，要在组件mounted/useEffect等DOM渲染完成的生命周期里执行赋值逻辑，不要提前执行

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