如何在Inputfield的onLeave事件暂存数据，点击Save后再处理？

针对你的需求，这里有几个实用的临时存储方案，按推荐优先级排序：

1. JavaScript变量存储（最简单直接） #

直接在JS里维护一个对象实时保存表单输入，点击Save时再将数据提交给PHP。

// 初始化存储对象
let tempFormData = {};

// 监听所有表单元素的输入事件，实时更新数据
document.querySelectorAll('input, textarea, select').forEach(input => {
  input.addEventListener('input', function() {
    tempFormData[this.name] = this.value;
  });
});

// 点击Save按钮时提交数据到PHP
document.getElementById('saveBtn').addEventListener('click', async function() {
  try {
    const response = await fetch('save.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(tempFormData),
    });
    const result = await response.json();
    if (result.success) {
      alert('数据保存成功');
    }
  } catch (err) {
    console.error('保存失败:', err);
  }
});

优缺点：

• 优点：轻量无依赖，不需要操作DOM或浏览器存储，适合单页面临时存储场景。
• 缺点：页面刷新、关闭或跳转后数据会丢失，适合短时间内完成操作的情况。

2. 浏览器SessionStorage存储（支持刷新不丢失） #

如果担心用户中途刷新页面导致数据丢失，可以用sessionStorage——它会在当前浏览器会话（标签页）内保留数据，关闭标签后自动清除。

// 页面加载时，恢复之前保存的临时数据
window.addEventListener('load', function() {
  const savedData = JSON.parse(sessionStorage.getItem('tempFormData')) || {};
  Object.keys(savedData).forEach(key => {
    const input = document.querySelector(`[name="${key}"]`);
    if (input) input.value = savedData[key];
  });
});

// 监听输入事件，实时保存到sessionStorage
document.querySelectorAll('input, textarea, select').forEach(input => {
  input.addEventListener('input', function() {
    const currentData = JSON.parse(sessionStorage.getItem('tempFormData')) || {};
    currentData[this.name] = this.value;
    sessionStorage.setItem('tempFormData', JSON.stringify(currentData));
  });
});

// 点击Save提交并清除临时数据
document.getElementById('saveBtn').addEventListener('click', async function() {
  const tempData = JSON.parse(sessionStorage.getItem('tempFormData')) || {};
  try {
    const response = await fetch('save.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(tempData),
    });
    const result = await response.json();
    if (result.success) {
      alert('保存成功');
      sessionStorage.removeItem('tempFormData'); // 清除临时存储
    }
  } catch (err) {
    console.error('保存失败:', err);
  }
});

优缺点：

• 优点：页面刷新后数据不会丢失，用户体验更好；存储容量约5MB，足够存大多数表单数据。
• 缺点：数据以明文存储在浏览器中，不适合存放敏感信息；仅在当前会话（标签页）有效，跨标签页无法共享。

3. 隐藏DOM元素存储（不推荐，仅特殊场景可用） #

这是你提到的方案，用隐藏的<input>标签存储JSON格式的表单数据，提交表单时一起传给PHP。

<!-- 在表单内添加隐藏输入框 -->
<form id="myForm" action="save.php" method="POST">
  <!-- 其他表单元素 -->
  <input type="hidden" id="tempData" name="tempData" value="">
  <button type="button" id="saveBtn">Save</button>
</form>

// 监听输入事件，实时更新隐藏输入框的内容
document.querySelectorAll('input, textarea, select').forEach(input => {
  input.addEventListener('input', function() {
    const formData = {};
    document.querySelectorAll('input[name], textarea[name], select[name]').forEach(el => {
      formData[el.name] = el.value;
    });
    document.getElementById('tempData').value = JSON.stringify(formData);
  });
});

// 点击Save提交表单
document.getElementById('saveBtn').addEventListener('click', function() {
  document.getElementById('myForm').submit();
});

优缺点：

• 优点：不需要AJAX，直接通过表单提交，适合传统后端处理场景。
• 缺点：页面刷新后数据丢失；每次输入都要遍历所有表单元素，性能不如前两种方案；数据暴露在DOM中，安全性差。

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