如何使用JavaScript统计多个HTML文件中同一类的出现次数？

你的代码只能统计当前页面的.member元素数量，核心原因是浏览器中JavaScript的DOM操作仅能访问当前页面的文档上下文，无法直接读取其他独立HTML文件的内容。以下分场景给出解决方案：

场景1：当前页面嵌入了其他HTML文件（iframe） #

如果其他文件是通过iframe嵌入到当前页面的，可以遍历所有iframe，访问其内部文档来统计数量：

function numMembers() {
    // 统计当前页面的.member数量
    let totalCount = document.getElementsByClassName("member").length;
    
    // 遍历所有iframe并统计内部的.member数量
    const iframes = document.getElementsByTagName("iframe");
    for (const iframe of iframes) {
        try {
            // 兼容不同浏览器的iframe文档获取方式
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            totalCount += iframeDoc.getElementsByClassName("member").length;
        } catch (error) {
            console.warn("无法访问跨域iframe内容：", error);
        }
    }
    
    // 将结果写入指定元素
    const targetEl = document.getElementById("members");
    if (targetEl) {
        targetEl.textContent = totalCount;
    }
}

注意：如果iframe加载的是跨域页面，浏览器同源策略会阻止访问其内部文档，这种情况需要让iframe页面主动将数量发送给父页面，或改用后端统计方案。

场景2：统计多个独立页面的总数量 #

如果是网站的多个独立页面都有.member元素，需要在某个页面显示总数，有两种可行方案：

方案A：本地存储统计（前端实现） #

每个页面加载时，将当前页面的.member数量存入本地存储，在需要显示总数的页面读取所有存储值求和：

// 所有页面都需要添加这段代码，用于存储当前页面的数量
window.addEventListener("load", () => {
    const pageIdentifier = window.location.pathname;
    const currentPageCount = document.getElementsByClassName("member").length;
    localStorage.setItem(`member_count_${pageIdentifier}`, currentPageCount);
});

// 在需要显示总数的页面执行这个函数
function numMembers() {
    let totalCount = 0;
    // 遍历本地存储，累加所有页面的数量
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith("member_count_")) {
            totalCount += parseInt(localStorage.getItem(key)) || 0;
        }
    }
    
    const targetEl = document.getElementById("members");
    if (targetEl) {
        targetEl.textContent = totalCount;
    }
}

局限：本地存储的数据仅存在当前浏览器/设备中，用户清除缓存会丢失数据，无法跨设备同步。

方案B：后端统计（跨设备同步） #

1. 每个页面加载时，向后端接口发送当前页面的.member数量（可附带页面标识）；
2. 后端将每个页面的数量存储到数据库中；
3. 在需要显示总数的页面，请求后端接口获取累加后的总数，再写入指定元素。

这种方案可以实现跨设备的数据同步，数据持久化更可靠。

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