WordPress更新：多实例独立JS秒表localStorage持久化实现

原有代码无法支持多秒表实例的核心问题有三个：

• 使用document.querySelector()获取元素时，只会返回匹配选择器的第一个DOM节点，其余秒表的按钮、时间显示区域都没有绑定事件、也不会被更新
• 计时秒数、定时器ID全部是全局变量，所有秒表共用同一份状态，运行时必然互相覆盖
• localStorage使用固定key存储时间，所有秒表的计时数据存在同一个字段下，刷新页面后无法区分每个秒表各自的存储值

1. 给每个秒表容器添加唯一标识 #

从数据库读取秒表数据时，使用每条记录的唯一ID作为秒表的身份标识，写到容器的data-*属性上，作为后续状态隔离、独立存储的依据。修改后的HTML结构示例：

<!-- 用data-stopwatch-id绑定数据库返回的唯一记录ID -->
<div class="c-add-task-main-container" data-stopwatch-id="1">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause" style="display: none;">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">00:00:00</div>
</div>
<div class="c-add-task-main-container" data-stopwatch-id="2">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause" style="display: none;">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">00:00:00</div>
</div>
<!-- 其余秒表结构同上，替换data-stopwatch-id为对应数据库ID即可 -->

2. 编写隔离的实例初始化逻辑 #

遍历所有秒表容器，为每个容器单独维护自己的计时状态、绑定专属事件，通过闭包实现实例间状态完全不干扰，localStorage按秒表ID独立存储数据。完整JS代码如下：

// 公共时间格式化函数，所有实例共用
const formatTime = (totalSeconds) => {
    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds - hours * 3600) / 60);
    let secs = Math.floor(totalSeconds % 60);
    return [hours, minutes, secs].map(num => num < 10 ? `0${num}` : num).join(':');
}

// 初始化所有秒表：如果是异步从数据库拉取数据渲染DOM，要等DOM插入完成后再执行本函数
const initAllStopwatches = () => {
    // 选中页面所有秒表容器
    const stopwatchContainers = document.querySelectorAll('.c-add-task-main-container');
    
    stopwatchContainers.forEach(container => {
        // 每个实例单独获取自己内部的元素，不全局查找
        const startBtn = container.querySelector('.start');
        const pauseBtn = container.querySelector('.pause');
        const clearBtn = container.querySelector('.clear');
        const output = container.querySelector('.output');
        // 获取当前秒表的唯一ID
        const watchId = container.dataset.stopwatchId;
        const storageKey = `stopwatch_${watchId}_seconds`;

        // 每个实例维护自己的状态，闭包隔离，不会和其他秒表冲突
        let seconds = 0;
        let interval = null;

        // 初始化：读取本地存储的上次时间
        if (localStorage.getItem(storageKey) !== null) {
            seconds = parseInt(localStorage.getItem(storageKey));
        }
        output.textContent = formatTime(seconds);

        // 计时逻辑，仅更新当前实例的显示和存储
        const tick = () => {
            seconds++;
            localStorage.setItem(storageKey, seconds);
            output.textContent = formatTime(seconds);
        }

        // 绑定当前实例的按钮事件
        startBtn.addEventListener('click', () => {
            if (interval) return;
            startBtn.style.display = 'none';
            pauseBtn.style.display = 'block';
            interval = setInterval(tick, 1000);
        });

        pauseBtn.addEventListener('click', () => {
            clearInterval(interval);
            interval = null;
            pauseBtn.style.display = 'none';
            startBtn.style.display = 'block';
        });

        clearBtn.addEventListener('click', () => {
            clearInterval(interval);
            interval = null;
            seconds = 0;
            localStorage.removeItem(storageKey);
            output.textContent = formatTime(0);
            pauseBtn.style.display = 'none';
            startBtn.style.display = 'block';
        })
    })
}

// 页面DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initAllStopwatches);

• 如果是通过接口异步获取秒表数据、动态拼接HTML插入页面，需要在HTML全部插入到DOM之后再调用initAllStopwatches()，否则会找不到动态渲染的容器
• 必须保证每个秒表的data-stopwatch-id全局唯一，和数据库记录ID一一对应，才能保证本地存储的数据不会串
• 不需要额外引入第三方库，原生JS即可实现，任意数量的秒表都可以正常独立运行，刷新页面后每个秒表都会从自己上次暂停的时间+1秒位置继续计时

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