如何保存含属性的HTML表单当前状态？

一、手动序列化核心状态 #

直接提取需要保存的关键状态字段，避免冗余数据，同时完全可控。适合业务逻辑明确的场景，服务端存储和恢复都更简单。

// 序列化表单状态为JSON字符串
function serializeFormState(form) {
  const state = {
    controls: [],
    fieldsets: []
  };

  // 收集所有表单控件的状态
  Array.from(form.elements).forEach(el => {
    if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) return;
    
    const controlState = {
      name: el.name,
      tag: el.tagName.toLowerCase(),
      type: el.type ?? '',
      value: el.value,
      checked: el.type === 'checkbox' || el.type === 'radio' ? el.checked : undefined,
      disabled: el.disabled
    };
    state.controls.push(controlState);
  });

  // 收集字段集的禁用状态
  Array.from(form.querySelectorAll('fieldset')).forEach(fieldset => {
    state.fieldsets.push({
      selector: `.${fieldset.className.replace(/\s+/g, '.')}`,
      disabled: fieldset.disabled
    });
  });

  // 若有动态新增元素，额外记录其结构（比如父元素选择器、插入位置、控件类型等）
  // 示例：state.dynamicElements = [{ parent: '.extra-container', type: 'input', name: 'newField' }]
  return JSON.stringify(state);
}

// 从JSON字符串恢复表单状态
function restoreFormState(form, stateStr) {
  const state = JSON.parse(stateStr);

  // 恢复控件状态
  state.controls.forEach(ctrl => {
    const el = form.querySelector(`[name="${ctrl.name}"]`);
    if (!el) return;
    
    el.value = ctrl.value;
    if (ctrl.checked !== undefined) el.checked = ctrl.checked;
    el.disabled = ctrl.disabled;
  });

  // 恢复字段集状态
  state.fieldsets.forEach(fs => {
    const fieldset = form.querySelector(fs.selector);
    if (fieldset) fieldset.disabled = fs.disabled;
  });

  // 恢复动态新增元素（根据之前记录的结构重新创建插入）
  // 示例：state.dynamicElements.forEach(item => { ... })
}

二、同步DOM状态到HTML属性后保存outerHTML #

将JS动态设置的状态（如disabled、checked、当前value）同步为HTML原生属性，再通过outerHTML保存完整DOM结构，恢复时直接插入即可。

// 同步DOM动态状态到HTML属性
function syncDomStateToAttributes(form) {
  // 处理表单控件
  Array.from(form.elements).forEach(el => {
    // 同步value属性
    if (['INPUT', 'TEXTAREA'].includes(el.tagName)) {
      el.setAttribute('value', el.value);
    }
    // 同步checked属性
    if (el.type === 'checkbox' || el.type === 'radio') {
      el.checked ? el.setAttribute('checked', 'checked') : el.removeAttribute('checked');
    }
    // 同步disabled属性
    el.disabled ? el.setAttribute('disabled', 'disabled') : el.removeAttribute('disabled');
  });

  // 处理下拉选框的选中状态
  Array.from(form.querySelectorAll('select')).forEach(select => {
    Array.from(select.options).forEach(opt => {
      opt.selected ? opt.setAttribute('selected', 'selected') : opt.removeAttribute('selected');
    });
  });

  // 处理字段集的disabled状态
  Array.from(form.querySelectorAll('fieldset')).forEach(fieldset => {
    fieldset.disabled ? fieldset.setAttribute('disabled', 'disabled') : fieldset.removeAttribute('disabled');
  });
}

// 保存表单为完整HTML字符串
function saveFormAsHtml(form) {
  syncDomStateToAttributes(form);
  return form.outerHTML;
}

// 从HTML字符串恢复表单
function restoreFormFromHtml(container, htmlStr) {
  container.innerHTML = htmlStr;
}

三、使用专门的DOM状态序列化库 #

可以借助成熟的库自动处理DOM状态的序列化，比如dom-serializer，它能将DOM节点序列化为包含所有动态状态的HTML字符串或结构化对象，省去手动遍历的麻烦。这类库会自动处理disabled、checked、动态值等细节，只需调用API即可完成序列化与恢复。

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