jQuery Mobile多页面同表单输入内容互相同步实现求助

嘿，这个需求其实很好解决——核心就是不要局限于单向同步，而是让所有表单元素共享同一个“数据源”，或者互相监听变化实时同步。我给你两种实用的方案，你可以根据需求选：

方案1：实时跨页面同步（会话内有效） #

这个方案不需要存储，只要用户在当前会话内切换页面，表单内容就会实时同步。关键是给所有表单的对应元素设置相同的name属性（比如三个页面的用户名输入框都叫username），然后监听所有输入元素的input和change事件，把值同步到其他页面的同名元素上。

代码实现 #

// 标记是否正在同步，避免循环触发事件
let isSyncing = false;

// 监听所有表单元素的输入/变化事件
$(document).on('input change', 'form [name]', function() {
  if (isSyncing) return; // 如果正在同步，跳过当前事件
  
  const fieldName = $(this).attr('name');
  const fieldValue = $(this).val();
  
  isSyncing = true;
  // 找到所有其他页面中同名的表单元素，排除当前元素，同步值
  $('form [name="' + fieldName + '"]').not(this).val(fieldValue);
  isSyncing = false;
});

为什么这么做？ #

• 用$(document).on()做事件委托，能覆盖jQuery Mobile动态加载的页面，不管页面是一开始就存在还是后来加载的，都能监听。
• isSyncing标记是为了防止同步时触发其他元素的input事件，造成循环调用。
• 支持文本框、下拉框、单选框等大多数表单元素，jQuery的val()方法能统一处理它们的值。

方案2：本地存储持久化同步（刷新页面也保留） #

如果希望用户刷新页面或者重新打开浏览器后，表单内容依然保留，同时跨页面同步，就可以用localStorage来做持久化存储。思路是：输入时把值存在本地存储，页面初始化时从本地存储读取值填充表单。

代码实现 #

// 监听输入事件，更新本地存储
$(document).on('input change', 'form [name]', function() {
  const fieldName = $(this).attr('name');
  let fieldValue = $(this).val();
  
  // 特殊处理复选框组（name相同的多个复选框）
  if ($(this).is(':checkbox')) {
    // 收集所有选中的复选框值，转成JSON字符串存储
    fieldValue = JSON.stringify(
      $('input[name="' + fieldName + '"]:checked').map(function() {
        return $(this).val();
      }).get()
    );
  }
  
  localStorage.setItem('form_' + fieldName, fieldValue);
});

// 页面初始化时，从本地存储读取值填充表单
$(document).on('pagecreate', function() {
  $('form [name]').each(function() {
    const fieldName = $(this).attr('name');
    const savedValue = localStorage.getItem('form_' + fieldName);
    
    if (savedValue !== null) {
      if ($(this).is(':checkbox')) {
        // 解析JSON，恢复复选框选中状态
        const checkedValues = JSON.parse(savedValue);
        $('input[name="' + fieldName + '"]').each(function() {
          $(this).prop('checked', checkedValues.includes($(this).val()));
        });
      } else {
        // 普通元素直接赋值
        $(this).val(savedValue);
      }
    }
  });
});

优势 #

• 数据持久化：用户关闭浏览器再打开，表单内容依然存在。
• 天然支持跨页面同步：所有页面都从同一个本地存储读取和写入，自动保持一致。
• 兼容大多数现代浏览器，不需要额外依赖。

注意事项 #

1. 确保所有表单的对应元素name属性完全一致，这是两种方案能生效的前提。
2. 如果有特殊表单元素（比如日期选择器、滑块），可以根据需要调整val()的处理逻辑，jQuery Mobile的表单组件大多兼容标准的val()方法。
3. 方案2中，如果不需要持久化，可以改用sessionStorage，这样数据只会在当前会话内存在，关闭浏览器就清空。

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