时间戳

首页 > 解决方案 > localStorage 未正确存储数据

local-storage - localStorage 未正确存储数据

问题描述

我们有一项 Web 开发任务，我似乎无法让本地存储正常工作，我正在尝试存储表值并在使用 localStorage 重新打开页面后检索它们。我的功能有问题吗？我为我刚刚玩弄它一段时间试图弄清楚它的混乱代码道歉。这是 .js 和 .html 代码：

var button = document.getElementById("calcButton");
var rowInsertIncrement = 0;

function grossPayCalculation(){
    var hoursWorked = document.getElementById("hoursWorked").value;
    var hourlyRate = document.getElementById("hourlyRate").value;

    if (hoursWorked <= 40){
        return hoursWorked*hourlyRate;
    }
    else {
        return (40*hourlyRate) + (hoursWorked - 40) * (hourlyRate*1.5);
    }
}

function taxCalculation(){
    if (grossPayCalculation() < 250){
        return 0.25;
    }
    else if (grossPayCalculation() >= 250 || grossPayCalculation() < 500){
        return 0.30;
    }
    else if (grossPayCalculation() >= 500 || grossPayCalculation() <=750){
        return 0.40;
    }
    else if (grossPayCalculation() > 750){
        return 0.50;
    }
}

function netPayCalculation(){
    return grossPayCalculation() - grossPayCalculation() * taxCalculation();
}

function insertToTable() {
    let fullName = document.getElementById("fullName").value;
    var hoursWorked = document.getElementById("hoursWorked").value;
    var hourlyRate = document.getElementById("hourlyRate").value;

    if(hoursWorked > 0 && hourlyRate > 0){

    var table = document.getElementById("list");
    var row = table.insertRow(rowInsertIncrement);
    var cellFullName = row.insertCell(0);
    var cellGrossPay = row.insertCell(1);
    var cellTax = row.insertCell(2);
    var cellNetPay = row.insertCell(3);

    cellFullName.innerHTML = fullName;
    cellGrossPay.innerHTML = "$" + grossPayCalculation().toFixed(2);
    cellTax.innerHTML = "$" + (grossPayCalculation() * taxCalculation()).toFixed(2);
    cellNetPay.innerHTML = "$" + netPayCalculation().toFixed(2);

    document.getElementById("payForm").reset();

    document.getElementById("fullName").focus();

    rowInsertIncrement++;

    var tableData = document.getElementByID("list").innerHTML;

    localStorage.setItem("employeeData", tableData);
}

    else {
        alert("Error: Invalid Input");
        document.getElementById("payForm").reset();
        document.getElementById("fullName").focus();
    }

}

document.onload = function() {
    if(localStorage.getItem("employeeData")){
    document.getElementById("list").innerHTML = localStorage.getItem("employeeData");
}
}

button.addEventListener("click", insertToTable, false);

<!doctype html>
<html>
    <head>
        <script language="JavaScript" src="employees.js"></script>
        <link rel="stylesheet" type="text/css" href="employees.css" />
        <meta charset="utf-8" />
        <title>Pay Form</title>
    </head>
    <body>
        <section id="content">
            <h1 id="test2">
                Employee Payroll Entry Form
            </h1>
            <p id="test"></p>
                <form id="payForm">
                    <label for="">Full Name:</label><input type="text" autofocus id="fullName"/><br />
                    <label for="">Hours Worked:</label><input type="text" id="hoursWorked" /><br />
                    <label for="">Hourly Rate:</label><input type="text" id="hourlyRate" />
                    <footer>
                        <button id="calcButton" type="button">Calculate</button>
                    </footer>
                </form>
            <h1>
                Employee Payroll Summary Report
            </h1>

            <table id = "employees">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Gross Pay</th>
                        <th>Tax</th>
                        <th>Net Pay</th>
                    </tr>
                </thead>
                <tbody id="list">

                </tbody>
            </table>
        </section>
        <script language="JavaScript" src="employees.js"></script>
    </body>
</html>

标签： local-storage

解决方案

推荐阅读