Question

因此，当尝试将一系列复选框的ID保存在localStorage中时，我遇到了问题，因为它们对应于已检查或未选中状态。但现在，当我重新加载页面时，没有迹象表明正在进行更改。

基本上，我首先假设所有的复选框都是检查。
如果选中该复选框，则其ID应进入数组，我稍后将其作为字符串保存在localStorage中。
如果取消选中该复选框，则其ID应弹出数组，我稍后将其作为字符串保存在localStorage中。

这是我的代码。我用两个星号（**）括起了我困难的根源。

    <!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>

Answer 1

您遇到的主要问题是hasAttribute()属性检查属性的值，因为它是用HTML编写的。要检查当前值，您需要使用checked属性。

改变这个：

if (checkbox_elmnt.hasAttribute("checked", false))

到此：

if (checkbox_elmnt.checked)

您的代码将按预期工作。虽然，为了提高效率，我会对它进行一些不同的编码，但是您的代码将使用上面的修复。

在PhoneGap中的localStorage中切换Checkbox ID

1 个答案: