如何将classList.toggle()状态保存到localStorage？相关疑问解答

初始实现代码 #

实现点击按钮切换元素的strike类：

const btns = document.querySelectorAll('#btn')
const items = document.querySelector('#item')
btns.forEach(btn => {
    btn.addEventListener('click', (e) =>{
            const item = e.currentTarget.parentElement
            item.classList.toggle('strike')
    })
})

尝试添加localStorage保存状态的代码 #

window.addEventListener('DOMContentLoaded',() => {
    const listItems = items.map(item => {
        return `
            <ul>
                <li id='item'>${item}</li>
                <button id='btn'>Click</button>
           </ul>
        `
    })
    content.innerHTML = listItems.join(' ')
    const btns = document.querySelectorAll('#btn')

    btns.forEach(btn => {
        btn.addEventListener('click', (e) =>{
            if(btn) {
                const item = e.currentTarget.parentElement
                const wasToggled = localStorage.getItem('strike') === 'true'
                localStorage.setItem('strike', !wasToggled)
                item.classList.toggle('strike', !wasToggled)
            }
        })
    })
    window.onload = () => {
        items.classList.toggle('strike', localStorage.getItem('strike') == 'true')
    }
})

疑问与解答 #

1. 为什么要将true以字符串'true'的形式存储，而非布尔值true？直接用布尔值为何无效？ #

localStorage的API规定只能存储字符串类型的数据。当你尝试存入布尔值true时，它会自动调用toString()方法将其转为字符串"true"；存入false则会变成"false"。

如果直接用布尔值做判断，比如localStorage.getItem('strike') === true，结果永远是false——因为取出来的是字符串，和布尔值类型不匹配，全等判断会失败。所以必须把存储的值转为字符串，取出时再和字符串'true'比较，或者手动转成布尔值使用。

2. 页面刷新后，状态只保存到列表的第一个元素上，这是为什么？ #

核心原因有两个：

• ID重复：你循环生成的所有<li>都用了同一个id='item'，但同一个页面中ID必须唯一。document.querySelector('#item')只会匹配到第一个符合条件的元素，所以刷新后只有第一个元素会被处理。
• 单一存储键冲突：你只用了一个'strike'键存储状态，不管点击哪个按钮，都会覆盖同一个值。刷新后自然只能把这个单一状态应用到第一个匹配的元素上。

优化后的代码示例 #

要实现每个元素独立保存状态，需要给每个元素分配唯一标识，比如用索引或自定义属性：

window.addEventListener('DOMContentLoaded', () => {
    // 假设items是你的数据源数组
    const items = ['任务1', '任务2', '任务3'];
    const content = document.getElementById('content');

    // 生成列表时给每个元素加唯一的data-id属性
    const listItems = items.map((item, index) => {
        return `
            <ul>
                <li data-id="${index}">${item}</li>
                <button data-id="${index}">Click</button>
            </ul>
        `;
    });
    content.innerHTML = listItems.join('');

    // 给按钮绑定事件
    const btns = document.querySelectorAll('button[data-id]');
    btns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const id = e.currentTarget.dataset.id;
            const item = document.querySelector(`li[data-id="${id}"]`);
            
            // 取出对应ID的状态，默认是false
            const currentState = localStorage.getItem(`strike_${id}`) === 'true';
            const newState = !currentState;
            
            localStorage.setItem(`strike_${id}`, newState.toString());
            item.classList.toggle('strike', newState);
        });
    });

    // 页面加载时恢复每个元素的状态
    items.forEach((_, index) => {
        const item = document.querySelector(`li[data-id="${index}"]`);
        const savedState = localStorage.getItem(`strike_${index}`) === 'true';
        item.classList.toggle('strike', savedState);
    });
});

优化点说明 #

• 用data-id代替重复的ID，保证每个元素有唯一标识
• 给每个元素的状态分配独立的localStorage键（比如strike_0、strike_1），避免互相覆盖
• 页面加载时遍历所有元素，分别恢复各自的保存状态

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