如何遍历 localStorage 查找同一天内值重复的输入项并标记类名-js教程-PHP中文网

本文介绍一种高效、健壮的方法，遍历当前周对应的 localStorage 键值对，按工作日分组识别内容相同的输入框，并自动添加 double-input 或 no-double-input 类，实现跨输入框的重复值高亮逻辑。

本文介绍一种高效、健壮的方法，遍历当前周对应的 localstorage 键值对，按工作日分组识别内容相同的输入框，并自动添加 `double-input` 或 `no-double-input` 类，实现跨输入框的重复值高亮逻辑。

在构建周计划表格（如周一至周五排班表）时，常需校验用户输入是否在同一天内重复——例如多个“Montag”输入框填了相同内容，应视觉提示冲突。由于数据持久化于 localStorage，且键名格式为 _（如 "40_tdMontag1"），而 DOM 元素 ID 为 tdMontag1，我们需要：
✅ 提取当前周所有相关键；
✅ 映射到真实 DOM 元素并读取其存储值；
✅ 按工作日（Montag/Dienstag/…）分组比对；
✅ 精准标记重复项（double-input）与唯一项（no-double-input）。

以下是优化后的完整实现：

function getAnyDoubleInput() {
    // 1. 获取当前周编号（优先从 localStorage 读取，否则用 moment.js 动态计算）
    const week = localStorage.getItem('currentWeek') || moment().isoWeek();

    // 2. 筛选出属于本周的所有 localStorage 键（如 "40_tdMontag1", "40_tdDienstag3"）
    const weekKeys = Object.keys(localStorage).filter(key => key.startsWith(`${week}_`));

    // 3. 构建 { inputId: [value] } 映射（注意：同一 inputId 可能有多个值？但实际每 ID 唯一对应一个键，故取 [0] 即可）
    const inputs = {};
    weekKeys.forEach(key => {
        const id = key.split('_').slice(1).join('_'); // 更健壮地提取 ID（兼容含下划线的 ID，如 tdMontag_1）
        const value = localStorage.getItem(key);
        inputs[id] = [value]; // 单值数组便于后续统一处理
    });

    // 4. 定义工作日列表，逐日处理
    const weekDays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'];

    weekDays.forEach(day => {
        // 获取当日所有相关 input ID（如 tdMontag1、tdMontag2）
        const dayInputIds = Object.keys(inputs).filter(id => id.includes(day));

        // 收集当日所有「值重复」的 ID（支持多值重复，如 A=B=C → A/B/C 全标记）
        const duplicateIds = new Set();
        for (let i = 0; i  {
            const el = document.getElementById(id);
            if (!el) return; // 安全防护：ID 不存在则跳过

            if (duplicateIds.has(id)) {
                el.classList.add('double-input');
                el.classList.remove('no-double-input');
            } else {
                el.classList.add('no-double-input');
                el.classList.remove('double-input');
            }
        });
    });
}

关键优化说明：
? 健壮的 ID 解析：使用 key.split('_').slice(1).join('_') 替代 substring(indexOf('_')+1)，避免因 ID 自身含 _（如 tdMontag_2）导致截断错误；
? 双重循环去重逻辑：采用 i ? 空值防护：显式排除 null/undefined，防止 localStorage 中未初始化项干扰判断；
? DOM 安全检查：if (!el) return 防止因页面结构变化导致脚本崩溃；
? 类名原子操作：使用 add()/remove() 而非 className = 赋值，避免覆盖原有 CSS 类。

调用建议：