所以我在尝试将一系列复选框的 ID 保存在 localStorage 中时遇到了问题，因为它们对应于它们的选中或未选中状态。但是现在，当我重新加载页面时，没有迹象表明正在进行更改。
- 基本上，我首先假设所有复选框都将是 检查。
- 如果选中该复选框，则其 ID 应进入 数组，后来我将其作为字符串保存在本地存储中。
- 如果未选中该复选框，则其 ID 应弹出 数组，后来我将其作为字符串保存在本地存储中。
这是我的代码。我用两个星号(**(括起来了我的困难来源。
<!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>
// Wait for PhoneGap to load.
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready.
function onDeviceReady() {
// Get myL1s if it exists in localStorage.
if (window.localStorage.getItem("myL1s") === null) {
window.localStorage.setItem("myL1s", "en,de,fr,es,pt,ru,hi,ar,zh-CN,zh-TW,ja");
}
// Set checklist checked values based on allLs being in myL1s.
for (x = 0; x < allLs.length; x++) {
if (jQuery.inArray(allLs[x], myL1s)) {
document.getElementById(allLs[x]).setAttribute("checked", true);
}
else {
document.getElementById(allLs[x]).setAttribute("checked", false);
}
}
}
</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>
**<script>
// Set a base myL1s string.
var allLs = ["en", "de", "fr", "es", "pt", "ru", "hi", "ar", "zh-CN", "zh-TW", "ja"];
var myL1s = window.localStorage.getItem("myL1s").split(",");
// Set checkbox listeners to check for unchecked and checked checkboxes.
// Remove the checkbox id's from myL1s when unchecked. Add them when checked.
function togglyMyL1s(checkbox_elmnt) {
if (checkbox_elmnt.hasAttribute("checked", false)) {
window.localStorage.setItem("myL1s", myL1s.pop(checkbox_elmnt.id).join(","));
}
else {
window.localStorage.setItem("myL1s", myL1s.push(checkbox_elmnt.id).join(","));
}
var myL1s = window.localStorage.getItem("myL1s");
}
</script>**
</body>
</html>
您遇到的主要问题是hasAttribute()属性检查属性的值，因为它是用 HTML 编写的。若要检查当前值，需要使用checked属性。
更改此设置：
if (checkbox_elmnt.hasAttribute("checked", false))
对此：
if (checkbox_elmnt.checked)
您的代码将按预期工作。虽然，为了提高效率，我会以不同的方式编写代码，但您的代码将与上面的修复程序一起使用。