Javascript：应用程序数据未保存到LocalStorage

Question

我正在尝试为在线课程设计一个应用程序。我的Javascript似乎有问题。我将代码发送给了老师，她说她无法弄清这种奇怪行为的原因，所以现在我要在线联系。这是我采取的测试步骤：

1. 使用应用的默认密码（设置为7777）登录
2. 在我的法律免责声明页面上单击“是”
3. 在“工厂信息”页面上输入工厂信息（包括设置为5555的新密码），然后单击“更新”
4. 单击“更新”后，它将返回登录页面，没有输入密码，并且密码键盘似乎已禁用
5. 如果我单击“关于”页面的链接，然后单击“主页”链接，它将返回我的登录页面，其中包含我先前在密码输入中输入的密码以及在似乎禁用了键盘的情况下输入的数字< / li>
6. 如果输入新密码（5555），则会收到一条警告，提示您密码错误；但是，如果我输入默认密码（7777），则会带我回到工厂信息页面，同时仍输入我的工厂信息
7. 我检查了localStorage，然后在Key下将“ agreedToLegal”全部设置为“ true”。

我是Java语言的初学者，所以我不确定为什么当我单击“更新”时却将我带回到登录页面而不保存到LocalStorage。

我通过XAMPP（Localhost端口80）通过Google Chome进行了测试。

任何有关如何解决这两个问题的建议都将受到欢迎。

Javascript：

// Password Validation

function addValueToPassword(button) {
    var currVal = $("#passcode").val();
    if(button == "bksp") {
        $("#passcode").val(currVal.substring(0, currVal.length - 1));   
    }
    else {
        $("#passcode").val(currVal.concat(button));
    }
}

$("#btnEnter").click(function() {
    var password = getPassword();
    if(document.getElementById("passcode").value == password) {
        if(localStorage.getItem("agreedToLegal") == null) {
            $.mobile.changePage("#legalNotice");
        }
        else if(localStorage.getItem("agreedToLegal") == "true") {
            if(localStorage.getItem("plant") == null) {
                $.mobile.changePage("#pagePlantInfo");
            }
            else {
                $.mobile.changePage("#pageMenu");
            }
        }
    }
    else {
        alert("Incorrect password, please try again."); 
    }
});

function getPassword() {
    if(typeof(Storage) == "undefined") {
        alert("Your browser does not support HTML5 localStorage. Try upgrading.");
    }
    else if(localStorage.getItem("plant") != null) {
        return JSON.parse(localStorage.getItem("plant")).NewPassword;
    }
    else {
        return "7777";
    }
}

// Plant Info
$("#noticeYes").click(function() {
    localStorage.setItem("agreedToLegal", "true");
});


$("#btnClearPlantInfo").click(function () {
    clearPlantForm();
});

$("#btnPlantInfoUpdate").submit(function () {
    savePlantForm();
    return true;
});

function checkPlantForm() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var date = d.getDate();
    var year = d.getFullYear();
    var currentDate = year + '/' +
    (('' + month).length < 2 ? '0' : '') +
    month + '/' +
    (('' + date).length < 2 ? '0' : '') + date;

    if (($("#txtPlantID").val() != "") &&
    ($("#datInstallDate").val() != "") && 
    ($("#datInstallDate").val() <= currentDate)) {
        return true;
    } else {
        return false;
    }
}

function savePlantForm() {
    if (checkPlantForm()) {
        var plant = {
        "PlantID": $("#txtPlantID").val(),
        "DateOfInstallation": $("#datInstallDate").val(),
        "NewPassword": $("#changePassword").val(),
    };

        try {
            localStorage.setItem("plant", JSON.stringify(plant));
            alert("Saving Information");

            $.mobile.changePage("#pageMenu");
            window.location.reload();
        } catch (e) {
            if (window.navigator.vendor === "Google Inc.") {
                if (e == DOMException.QUOTA_EXCEEDED_ERR) {
                    alert("Error: Local Storage limit exceeds.");
                }
            } else if (e == QUOTA_EXCEEDED_ERR) {
                alert("Error: Saving to local storage.");
            }
            console.log(e);
        }
    } else {
        alert("Please complete the form properly.");
    }
}

function clearPlantForm() {
    localStorage.removeItem("plant");
        alert("The stored data have been removed");
    }

function showPlantForm() {
    try {
        var plant = JSON.parse(localStorage.getItem("plant"));
    } catch (e) {
        if (window.navigator.vendor === "Google Inc.") {
            if (e == DOMException.QUOTA_EXCEEDED_ERR) {
                alert("Error: Local Storage limit exceeds.");
            }
        } else if (e == QUOTA_EXCEEDED_ERR) {
            alert("Error: Saving to local storage.");
        }
        console.log(e);
    }

    if (plant != null) {
        $("#txtPlantID").val(plant.PlantID);
        $("#changePassword").val(plant.NewPassword);
        $("#datInstallDate").val(plant.DateOfInstallation);
    }
}

HTML：

<!doctype html>
<html lang="en">
<head>
  <title>Power Consumption Monitor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <link rel="stylesheet" href="bootstrap.css" />
  <script src="https://code.jquery.com/jquery-2.0.3.js"
  integrity="sha256-lCf+LfUffUxr81+W0ZFpcU0LQyuZ3Bj0F2DQNCxTgSI="
  crossorigin="anonymous"></script>
  <script src="chromeFileProtocolFix.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
  <script src="bootstrap.js"></script>
</head>
<body>
  <!-- Start of first page... Password Validation -->
  <div data-role="page" id="pageHome">
    <div data-role="header">
      <h1>Power Consumption Monitor</h1>
    </div>
    <div data-role="content">
      Password : <input type="password" id="passcode"></input>
      <div data-role="controlgroup" id="numKeyPad">
        <a data-role="button" id="btnEnter" type="submit">Enter</a>
        <a href="#pageAbout" data-role="button">About</a>
      </div>
      <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" onClick="addValueToPassword(7)">7</a>
        <a data-role="button" onClick="addValueToPassword(8)">8</a>
        <a data-role="button" onClick="addValueToPassword(9)">9</a>
      </div>
      <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" onClick="addValueToPassword(4)">4</a>
        <a data-role="button" onClick="addValueToPassword(5)">5</a>
        <a data-role="button" onClick="addValueToPassword(6)">6</a>
      </div>
      <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" onClick="addValueToPassword(1)">1</a>
        <a data-role="button" onClick="addValueToPassword(2)">2</a>
        <a data-role="button" onClick="addValueToPassword(3)">3</a>
      </div>
      <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" onClick="addValueToPassword(0)">0</a>
        <a data-role="button" onClick="addValueToPassword('bksp')" data-icon="delete">del</a>
      </div>
    </div>
  </div>

  <!-- Disclaimer Page -->
  <div data-role="page" id="legalNotice" data-close-btn="none">
    <div data-role="header">
      <h1>Disclaimer</h1>
    </div>
    <div data-role="content">
      This is a legal notice. Do you consent?
      <br>
      <a href="#pagePlantInfo" id="noticeYes" data-role="button" data-icon="forward" data-mini="false">Yes</a>
    </div>
  </div>

  <!-- About Page -->
  <div data-role="page" id="pageAbout">
    <div data-role="header">
      <a href="#pageHome" data-role="button" data-icon="bars" data-iconpos="left">Home</a>
      <h1>Info</h1>
    </div>
    <div data-role="content">
      <p>Power Consumption Monitor App is proprietary software owned by Mark Inc. All rights reserved.</p>
    </div>
  </div>  

  <!-- Plant Information Page/Form -->
  <div data-role="page" id="pagePlantInfo">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info" data-iconpos="right" data-inline="true">Info</a>
      <h1>Plant Information</h1>
    </div>
    <div data-role="content">
      <form id="frmUserForm" action="">
        <div data-role="fieldcontain">
          <label for="txtPlantID">Plant ID: </label>
          <input type="text" placeholder="Plant ID" name="txtPlantID" 
          data-mini="false" id="txtPlantID" value="" 
          required>
        </div>
        <div data-role="fieldcontain">
          <label for="datInstallDate">Date of Installation: </label>
          <input type="date" name="datInstallDate" data-mini="false"
          id="datInstallDate" value="" required>
        </div>
        <div data-role="fieldcontain">
          <label for="changePassword">Edit Password: </label>
          <input type="password" placeholder="New Password" name="changePassword" data-mini="false" id="changePassword" value="" required>
        </div>
        <input type="submit" id="btnPlantInfoUpdate" data-icon="check"
        data-iconpos="left" value="Update" data-inline="true">
        <input name="Reset" type="reset" id="btnClearPlantInfo" value="Clear" data-icon="delete" data-iconpos="left" data-inline="true">
      </form>
    </div>
  </div>

  <!-- Menu page -->
  <div data-role="page" id="pageMenu">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars" data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info" data-iconpos="right" data-inline="true">Info</a>
      <h1>Power Consumption Monitor</h1>
    </div>
    <div data-role="content>
      <div data-role="controlgroup">
        <a href="#pagePlantInfo" data-role="button">Plant Info</a>
        <a href="#pagePowerConsumption" data-role="button">Power Consumption</a>
        <a href="#pageGraph" data-role="button">Graph</a>
        <a href="#pageAdvice" data-role="button">Suggestions</a>
      </div>
    </div>
  </div>

  <!-- Records page -->
  <div data-role="page" id="pagePowerConsumption">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars"
      data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info"
      data-iconpos="right" data-inline="true">Info</a>
      <h1>Power Consumption</h1>
    </div>
    <div data-role="content">
      <!-- Power Consumption Information Section -->
      <div data-role="fieldcontain" id="divPowerConsumptionSection">
      </div>
      <h3 align="center">History</h3>
      <div data-role="fieldcontain">
        <!-- Records Table -->
        <table id="tblRecords" class="ui-responsive table-stroke">
        </table>
      </div>
       <div data-role="fieldcontain">
        <a href="#pageNewRecordForm" id="btnAddRecord" data-role="button"
        data-icon="plus">Add New Entry</a>
        <a href="#" data-role="button" id="btnClearHistory"
        data-icon="delete">Clear History</a>
      </div>
    </div>
  </div>

  <!-- New Record Form page -->
  <div data-role="page" id="pageNewRecordForm">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars"
      data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info"
      data-iconpos="right" data-inline="true">Info</a>
      <h1>New Power Consumption Record</h1>
    </div>
    <div data-role="content">
      <form id="frmNewRecordForm" action="">
        <div data-role="fieldcontain">
          <div data-role="fieldcontain">
            <label for="datDate">Date: </label>
            <input type="date" name="datDate" data-mini="false"
            id="datDate" value="">
          </div>
          <div data-role="fieldcontain">
            <label for="txtWattsUsed">Power Used (In Watts):
            </label>
            <input type="number" step="0.01" placeholder="0" name="txtWattsUsed" data-mini="false" id="txtWattsUsed" value="">
          </div>
        </div>
        <input type="submit" id="btnSubmitRecord" value="">
      </form>
    </div>
  </div>

  <!--Graph Page -->
  <div data-role="page" id="pageGraph" class="test">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars"
      data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info"
      data-iconpos="right" data-inline="true">Info</a>
      <h1>Analyze</h1>
    </div>
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Power Consumption vs Date</h3>
      </div>
      <div class="panel-body">
        <canvas id="GraphCanvas" width="500" height="500" style="border:1px solid #000000;">
        </canvas>
      </div>
    </div>
  </div>

  <!--Advice Page -->
  <div data-role="page" id="pageAdvice">
    <div data-role="header">
      <a href="#pageMenu" data-role="button" data-icon="bars"
      data-iconpos="left" data-inline="true">Menu</a>
      <a href="#pageAbout" data-role="button" data-icon="info"
      data-iconpos="right" data-inline="true">Info</a>
      <h1>Suggestions</h1>
    </div>
    <div data-role="content">
      <canvas id="AdviceCanvas" width="550" height="550"
      style="border:1px solid #000000;">
      </canvas>
    </div>
  </div>

  <!--Custom Javascript/Jquery -->
  <script src="PlantInfoForm.js"></script>
  <script src="pageLoader.js"></script>  
  <script src="Table.js"></script>    
</body>
</html>