Question

我目前正在开发一款计算用户GPA的移动应用。我想要添加的一个功能是通过缓存数据或类似的其他方法保存输入数据的能力。是否可以通过存储数据的保存按钮保存所有输入，包括下拉响应？或类似的东西？

＆＃13;

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

 $('#btnAddClass').click(function() {
      $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
     $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
    });

$oBox.on('keyup', '.credits', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
 
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".credits").each(function() {
    var $this = $(this);
    if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return (sum / gradeTotal).toFixed(2);
}

$("#Calculate").on("click", function() {
 $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
  $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
          <link rel='stylesheet prefetch' href="http://maltertech.com/bootstrap.min.css">

    <head>
        <style>
          body {
    background-color: #A00000;
    background-size: cover;
    margin: 0;
    padding: 0;
}
.outer-box {
    height: true;
    width: 250px;
    padding: 10px;
    margin: 20px auto 20px auto;
    border-radius: 10px;
    background-color: white;
}
.block {
    margin: 5px;
}
.class {
    border: 1px solid black;
    border-radius: 5px;
    width: 200px;
    height: 35px;
    margin: 5px;
    padding: 5px;
}
.credits {
    border: 1px solid black;
    border-radius: 5px;
    width: 95px;
    height: 35px;
    margin: 5px;
    padding: 5px;
}
.grade-select {
    border: 1px solid black;
    border-radius: 5px;
    width: 95px;
    height: 35px;
    margin: 5px;
    padding: 5px;
}
.btn {
    border: 2px solid black;
    border-radius: 5px;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
#Calculate {
    width: 200px;
    border: 3px solid black;
}
.result {
    border: 3px solid black;
    border-radius: 5px;
    width: 200px;
    height: 100px;
    margin: 20px auto 20px auto;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
#gpa {
    font-size: 4rem;
    color: black;
    font-weight: bold;
}
          </style>
        <meta charset="UTF-8">
        <title>GPA Calculator</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <center>
            <div class='outer-box'>
                <div class='inner-box'>
                    <form class='block'>
                        <table>
                            <tr>
                                <input type="text" class='class' placeholder="Class">
                            </tr>
                            <br>
                            <tr>
                                <select class='credits'>
                                    <option value="">Credits</option>
                                    <option value="0.5">Half Year</option>
                                    <option value="1">Full Year</option>
                                </select>
                                <select class='grade-select'>
                                    <option value="">Grade</option>
                                    <option value="4.6">A+</option>
                                    <option value="4.0">A</option>
                                    <option value="3.6">B+</option>
                                    <option value="3.0">B</option>
                                    <option value="2.6">C+</option>
                                    <option value="2.0">C</option>
                                    <option value="1.0">D</option>
                                    <option value="0.0">F</option>
                                </select>
                            </tr>
                        </table>
                    </form>
                </div>
                <div id='btnAddClass' class='btn btn-default'>Add Class</div>
                <br>
                <button id="Calculate" class='btn btn-default' >Calculate</button>
                <div class='result'>
                    <h3 id="gpa">GPA</h3>
                </div>
            </div>
        </center>
    <script src='js/jquery.min.js'></script>
    <script src="js/index.js"></script>
    </body>
</html>

＆＃13;

Answer 1

您可以使用serialize()从表单中获取所有值（您还必须提供输入并选择序列化名称才能工作），您可以使用localStorage()保存数据，如：

var form_data = $(".block").serialize();
localStorage.setItem('data', form_data);

然后，如果需要，您可以删除保存在本地存储中的数据，如下所示：

localStorage.removeItem('data');

示例 JSFIDDLE 。

检查控制台以查看本地存储中存储的数据。

您可以详细了解localStorage() here 。

JQuery表单缓存文件

1 个答案: