如何遍历localStorage找出同天同值的重复输入并标记类名？

核心思路 #

要实现同一天内重复输入的检测，需要先按天分组收集当前周的所有日程内容，再统计每组内的重复值，最后根据统计结果给对应输入框添加类。

完整代码 #

function checkDuplicateInputs() {
    // 1. 获取当前周数，统一为字符串格式
    let week = localStorage.getItem('currentWeek');
    if (!week) {
        week = moment().isoWeek().toString();
    }
    const weekPrefix = `${week}_`;
    const weekDays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'];

    // 2. 收集当前周所有有效的日程项：按天分组，存储输入元素和对应内容
    const dailyEntries = {};
    weekDays.forEach(day => {
        dailyEntries[day] = [];
    });

    Object.keys(localStorage).forEach(key => {
        if (!key.startsWith(weekPrefix)) return;
        
        // 提取输入框ID
        const inputId = key.slice(weekPrefix.length);
        const inputElement = document.getElementById(inputId);
        if (!inputElement) return; // 跳过DOM中不存在的元素

        // 获取输入内容，去除首尾空格避免误判
        const content = inputElement.value.trim();
        if (!content) return; // 空内容不参与重复检测

        // 确定所属日期，加入对应分组
        const day = weekDays.find(d => inputId.includes(d));
        if (day) {
            dailyEntries[day].push({ element: inputElement, content });
        }
    });

    // 3. 统计每天的重复内容
    const dailyDuplicates = {};
    weekDays.forEach(day => {
        const contentCount = {};
        dailyEntries[day].forEach(entry => {
            contentCount[entry.content] = (contentCount[entry.content] || 0) + 1;
        });
        // 收集出现次数≥2的内容
        dailyDuplicates[day] = Object.keys(contentCount).filter(content => contentCount[content] >= 2);
    });

    // 4. 为输入框添加对应类
    weekDays.forEach(day => {
        dailyEntries[day].forEach(entry => {
            // 先清除之前的类，避免残留
            entry.element.classList.remove('double-input', 'no-double-input');
            // 根据是否为重复内容添加类
            if (dailyDuplicates[day].includes(entry.content)) {
                entry.element.classList.add('double-input');
            } else {
                entry.element.classList.add('no-double-input');
            }
        });
    });
}

代码说明 #

1. 周数处理：统一将周数转为字符串，避免字符串与数字的匹配问题。
2. 日程项收集：
   • 过滤出当前周的localStorage键，提取对应的输入框ID。
   • 跳过DOM中不存在的元素和空内容，避免无效处理。
   • 按工作日将输入元素和内容分组，确保只检测同一天内的重复。
3. 重复统计：对每天的内容计数，筛选出出现次数≥2的重复内容。
4. 类名设置：先清除输入框原有的类，再根据是否为重复内容添加double-input或no-double-input类，保证样式准确。

使用建议 #

• 在输入框内容变化时（比如input事件触发）调用该函数，实时检测重复。
• 页面初始化时也调用一次，确保加载时就显示正确的样式。

内容的提问来源于stack exchange，提问作者Phil-Absynth