如何用localStorage预填充EJS模板中从JSON加载的表单字段？

你的思路方向是对的，但现有代码存在几个可以优化的点：比如用索引作为存储键不够可靠（页面元素顺序变化就会出错）、重复处理不同元素类型导致代码冗余，而且没覆盖复选框/单选框这类特殊表单控件。下面给你一套更健壮的实现方案：

核心改进思路 #

1. 给表单元素加唯一标识：用data-storage-key属性给每个需要持久化的元素定义专属键名，避免依赖元素索引的脆弱性。
2. 统一处理所有表单元素：一次遍历完成预填充和事件绑定，减少重复代码。
3. 适配不同元素类型：针对文本框、滑块、下拉框、复选框/单选框做差异化处理，确保取值/赋值逻辑正确。
4. 实时保存用户输入：对文本框、滑块这类实时输入的控件，用input事件代替change事件，提升体验。

具体实现步骤 #

第一步：给表单元素添加存储标识 #

在EJS渲染的表单里，给需要持久化的元素加上data-storage-key：

<!-- 下拉框 -->
<select data-storage-key="user-role">
  <option value="admin" <%= defaultRole === 'admin' ? 'selected' : '' %>>管理员</option>
  <option value="user" <%= defaultRole === 'user' ? 'selected' : '' %>>普通用户</option>
</select>

<!-- 文本输入框 -->
<input type="text" data-storage-key="username" value="<%= defaultUsername %>">

<!-- 滑块控件 -->
<input type="range" data-storage-key="volume" min="0" max="100" value="<%= defaultVolume %>">

<!-- 复选框 -->
<input type="checkbox" data-storage-key="remember-me" <%= defaultRemember ? 'checked' : '' %>>

第二步：编写统一的JS逻辑 #

document.addEventListener('DOMContentLoaded', function() {
  // 1. 获取所有需要持久化的表单元素
  const storageElements = document.querySelectorAll('[data-storage-key]');

  // 2. 页面加载时预填充元素
  storageElements.forEach(element => {
    const key = element.dataset.storageKey;
    const savedValue = localStorage.getItem(key);

    // 如果localStorage有值，覆盖默认值；否则保留EJS渲染的默认值
    if (savedValue !== null) {
      switch(element.type) {
        case 'checkbox':
        case 'radio':
          element.checked = savedValue === 'true';
          break;
        default:
          element.value = savedValue;
      }
    }
  });

  // 3. 绑定事件，实时保存用户输入
  storageElements.forEach(element => {
    // 定义保存逻辑的函数
    const saveToStorage = () => {
      const key = element.dataset.storageKey;
      let value;

      switch(element.type) {
        case 'checkbox':
        case 'radio':
          value = element.checked.toString();
          break;
        default:
          value = element.value;
      }

      localStorage.setItem(key, value);
    };

    // 下拉框、复选框/单选框用change事件
    if (element.tagName === 'SELECT' || element.type === 'checkbox' || element.type === 'radio') {
      element.addEventListener('change', saveToStorage);
    } 
    // 文本框、滑块用input事件实时保存
    else if (['text', 'number', 'range', 'textarea'].includes(element.type)) {
      element.addEventListener('input', saveToStorage);
    }
  });
});

可选：添加表单重置功能 #

如果需要让用户一键恢复默认值，可以加个重置按钮：

<button id="reset-form">恢复默认设置</button>

对应的JS逻辑：

document.getElementById('reset-form').addEventListener('click', function() {
  const storageElements = document.querySelectorAll('[data-storage-key]');
  
  storageElements.forEach(element => {
    const key = element.dataset.storageKey;
    // 移除localStorage中的保存值
    localStorage.removeItem(key);
    
    // 恢复EJS渲染的默认值
    switch(element.type) {
      case 'checkbox':
      case 'radio':
        element.checked = element.hasAttribute('checked');
        break;
      default:
        element.value = element.getAttribute('value') || '';
    }
  });
});

关键优势说明 #

• 可靠性更高：用自定义的data-storage-key作为存储键，不会因为页面元素顺序调整导致数据错乱。
• 代码更简洁：统一处理所有元素类型，避免重复写select和input的逻辑。
• 体验更流畅：文本框和滑块实时保存输入，用户不用等到失去焦点才触发保存。
• 兼容性更好：覆盖了复选框、单选框这类之前没处理的特殊控件。

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