为何localStorage.clear()在表单提交函数内无法正常工作？

问题根源 #

核心问题是页面跳转触发的unload事件会重新把表单数据写入localStorage，直接覆盖了你在提交函数里的clear()操作。完整流程：

1. 提交函数执行localStorage.clear()
2. 页面跳转触发window.unload事件
3. unload事件内的代码重新将当前表单值存入localStorage
4. 返回表单页时，load事件读取这些重新存入的数据，导致clear()看起来没生效

解决方案 #

添加全局标记变量，在表单提交时标记“本次不需要保存数据”，让unload事件跳过保存逻辑。以下是修改后的代码：

1. 新增全局标记变量 #

在所有函数外部定义：

let shouldSaveFormData = true; // 默认允许保存表单数据到localStorage

2. 修改表单提交事件 #

在清除localStorage前设置标记为false：

form.on('submit', function() {
  event.preventDefault();

  if (checkFieldsIfNotEmpty() == true) {
    var formDataFields = form.serializeArray(),
      count = Object.keys(data).length;

    $.each(formDataFields, function(index, value) {
      if (value.name === 'category' || value.name === 'subcategory' || value.name.indexOf('filter') >= 0) {
        // do nothing
      } else {
        formData.append(value.name, value.value);
      }
    });

    $('.add-item__input-select').each(function(index, value) {
      formData.append($(this).attr('name'), $(this).attr('id'));
    });

    $.each(data, function(index, value) {
      formData.append('files[]', value);
    });

    // 异步上传建议等待完成后再执行后续操作（可选优化）
    uploadData(formData).then(() => {
      // 设置标记：本次跳转不保存数据
      shouldSaveFormData = false;
      window.localStorage.clear();
      // 手动跳转商品页
      window.location.href = '你的商品页URL';
    }).catch(err => {
      // 上传失败时保留数据并提示
      console.error('上传失败:', err);
    });
  }
});

3. 修改unload事件的保存逻辑 #

添加标记判断，仅在允许时保存数据：

$(window).on('unload', function() {
    // 标记为false时直接跳过保存
    if (!shouldSaveFormData) return;

    $(':file, :checkbox, select, textarea, input').each(function() {
        if ( !$(this).hasClass('add-item__select') && !$(this).is(':checkbox') ) {
            localStorage.setItem($(this).attr('name'), $(this).val());
        } else if ( $(this).is(':checked') ) {
            localStorage.setItem($(this).attr('name'), $(this).val());
        }
    })
});

额外说明 #

如果uploadData不是Promise异步函数，可直接在原有代码中添加标记和clear操作，无需等待回调，但建议改为异步回调的方式避免上传失败却丢失表单数据的情况。

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