如何基于PAGE-A的类长度值更新PAGE-B中的文本字段？

背景回顾 #

• PAGE-A中可通过以下代码计算.gjGroupUsersUser子元素长度减1的值（示例输出为2）：

  var count = $('.gjGroupUsersUser').children().length - 1;
  console.log(count);
  

• 需求：当PAGE-A的count值变化时，实时更新PAGE-B的xfield字段。

可行方案 #

方案1：使用localStorage实现客户端实时同步（同源页面适用） #

无需服务器介入，利用浏览器localStorage的跨页面通信能力实现同步。

PAGE-A代码（监听元素变化并更新localStorage）

// 目标元素
const targetEl = $('.gjGroupUsersUser')[0];

// 计算当前count值
function getCurrentCount() {
  return $('.gjGroupUsersUser').children().length - 1;
}

// 初始化存储count值
localStorage.setItem('groupUserCount', getCurrentCount());

// 监听元素子节点的添加/移除变化
const observer = new MutationObserver(() => {
  const newCount = getCurrentCount();
  localStorage.setItem('groupUserCount', newCount);
});

// 配置监听规则：仅关注子节点变化
observer.observe(targetEl, { childList: true });

PAGE-B代码（监听localStorage变化并更新xfield）

// 初始化xfield的初始值
function updateXField() {
  const count = localStorage.getItem('groupUserCount');
  if (count) {
    $('#xfield').val(count);
  }
}
updateXField();

// 监听其他页面修改localStorage的事件
window.addEventListener('storage', (e) => {
  if (e.key === 'groupUserCount') {
    $('#xfield').val(e.newValue);
    console.log('新值:', e.newValue, '旧值:', e.oldValue);
  }
});

方案2：服务器端同步（跨域/持久化需求适用） #

若PAGE-A和PAGE-B不同源，或需要持久化数据，通过服务器中转实现同步。

步骤1：后端提供两个接口

• 更新接口：接收PAGE-A的count值并存储（如数据库、Redis）
• 查询接口：返回当前最新的count值

PAGE-A代码（元素变化时调用更新接口）

const targetEl = $('.gjGroupUsersUser')[0];

function getCurrentCount() {
  return $('.gjGroupUsersUser').children().length - 1;
}

// 初始提交count值
$.post('/api/update-count', { count: getCurrentCount() });

// 监听元素变化，实时提交新值
const observer = new MutationObserver(() => {
  const newCount = getCurrentCount();
  $.post('/api/update-count', { count: newCount });
});
observer.observe(targetEl, { childList: true });

PAGE-B代码（轮询或WebSocket获取最新值）

方式A：轮询（简单实现）

let oldVal = null;

function fetchCount() {
  $.get('/api/get-count', (data) => {
    const newVal = data.count;
    if (newVal !== oldVal) {
      $('#xfield').val(newVal);
      console.log('新值:', newVal, '旧值:', oldVal);
      oldVal = newVal;
    }
  });
}

// 初始化加载
fetchCount();
// 每2秒轮询一次（可根据需求调整间隔）
setInterval(fetchCount, 2000);

方式B：WebSocket（实时性更高）

若需要无延迟的实时同步，使用WebSocket建立长连接，服务器在count值变化时主动推送至PAGE-B。

原尝试失败原因 #

• PAGE-B中监听#count的change事件无效：#count元素不存在于PAGE-B，且PAGE-A的count变化无法直接触发PAGE-B的DOM事件。
• 使用$.get请求PAGE-A HTML解析：只能获取页面加载时的静态内容，无法捕捉动态变化后的count值。

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