页面加载时读取localStorage中Forza Horizon 5车辆复选框状态问题求助

问题修复方案 #

存在的核心问题 #

• JS执行时DOM还未加载完成，无法正确获取所有复选框元素
• 复选框状态判断和存储逻辑存在语法错误
• 缺少页面加载时从localStorage读取状态回写复选框的逻辑
• localStorage存储的字符串值未转布尔值，直接赋值会导致状态异常

修复步骤 #

1. 调整JS引入位置
   将PHP代码中的include('javascript.js');从页面顶部移到</body>标签之前，确保DOM渲染完成后再执行JS，修改后PHP末尾代码如下：

</section>
            <?php include('javascript.js'); ?>
        </body>
    </html>

2. 替换JS代码
   将原来的JavaScript代码全部替换为以下内容：

// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.getElementsByClassName('input');
    // 遍历所有复选框
    for (let i = 0; i < inputs.length; i++) {
        // 页面加载时读取localStorage状态回写
        const savedState = localStorage.getItem(`input${i}`);
        // 字符串转布尔值后赋值给checked属性
        inputs[i].checked = savedState === 'true';
        
        // 绑定点击事件存储状态
        inputs[i].addEventListener('click', function() {
            localStorage.setItem(`input${i}`, this.checked);
        });
    }
});

验证方法 #

修改完成后刷新页面，勾选任意复选框后再次刷新，对应复选框会保持勾选状态，开发者工具中localStorage存储的状态和页面状态完全同步。

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