PhoneGap中复选框ID的localStorage状态保存与加载异常问题

看起来你的代码有几个关键问题导致页面重载后状态不生效，我来帮你一步步修复：

原代码的核心问题 #

1. 变量未定义：allLs和myL1s变量没有明确声明和初始化，导致遍历和判断逻辑失效
2. jQuery.inArray判断错误：该方法返回元素的索引，找不到返回-1，原代码的if (jQuery.inArray(...))会把索引0（第一个元素）判定为false，错误设置未勾选状态
3. 复选框状态设置方式错误：用setAttribute("checked", true/false)不如直接操作DOM元素的checked属性可靠
4. 缺失完整的togglyMyL1s函数实现：这是处理勾选/取消逻辑的核心，你提供的代码不完整

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>PollyGot</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script>
        // 定义所有语言复选框的ID数组
        const allLs = ["en", "de", "fr", "es", "pt", "ru", "hi", "ar", "zh-CN", "zh-TW", "ja"];

        // Wait for PhoneGap to load.
        document.addEventListener("deviceready", onDeviceReady, false);

        // PhoneGap is ready.
        function onDeviceReady() {
            // 初始化localStorage：如果没有myL1s，设置为所有语言（全勾选）
            if (!window.localStorage.getItem("myL1s")) {
                window.localStorage.setItem("myL1s", allLs.join(","));
            }

            // 将localStorage中的字符串转为数组
            const myL1sArray = window.localStorage.getItem("myL1s").split(",");

            // 遍历所有复选框，设置对应状态
            allLs.forEach(langId => {
                const checkbox = document.getElementById(langId);
                // 直接操作checked属性，比setAttribute更可靠
                checkbox.checked = myL1sArray.includes(langId);
            });
        }

        // 处理复选框勾选/取消逻辑
        function togglyMyL1s(checkbox) {
            const langId = checkbox.id;
            // 获取当前存储的数组
            let myL1sArray = window.localStorage.getItem("myL1s").split(",");

            if (checkbox.checked) {
                // 勾选时：如果数组中没有该ID则添加
                if (!myL1sArray.includes(langId)) {
                    myL1sArray.push(langId);
                }
            } else {
                // 取消勾选时：从数组中移除该ID
                myL1sArray = myL1sArray.filter(id => id !== langId);
            }

            // 更新localStorage
            window.localStorage.setItem("myL1s", myL1sArray.join(","));
        }
    </script>
</head>
<body>
    <!-- Language Settings -->
    <div class="jumbotron">
        <div class="form-group">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="en" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="en">I speak English.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="de" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="de">Ich spreche Deutsch.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="fr" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="fr">Je parle français.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="es" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="es">Yo hablo español.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="pt" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="pt">Eu falo português.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="ru" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="ru">Я говорю по-русски.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="hi" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="hi">मैं हिंदी बोलते हैं।</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="ar" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="ar">أنا أتحدث العربية.</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="zh-CN" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="zh-CN">我说中文。</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="zh-TW" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="zh-TW">我說中文。</label>
            </div>
            <br>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="ja" onclick="togglyMyL1s(this)">
                <label class="custom-control-label" for="ja">私は日本語を話します。</label>
            </div>
        </div>
        <!-- Save and Return Button -->
        <button type="button" class="btn btn-success" id="snrBtn">Save and Return</button>
    </div>
</body>
</html>

关键改进点说明 #

• 明确变量定义：新增allLs数组存储所有语言ID，避免DOM遍历的冗余
• 正确的数组判断：用Array.includes()替代jQuery.inArray的模糊判断，逻辑更清晰
• 可靠的状态设置：直接操作复选框的checked属性，解决setAttribute的兼容性问题
• 完整的togglyMyL1s函数：实现了勾选时添加ID、取消时移除ID的逻辑，并实时更新localStorage
• 初始化逻辑优化：直接用allLs.join(",")生成初始全勾选的字符串，避免手动拼写错误

这样修改后，页面重载时就能正确读取localStorage中的状态并恢复复选框的勾选状态了。

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