如何在Phonegap中刷新后保存输入数据

时间:2019-03-07 13:31:07

标签: javascript html input save phonegap

我正在使用Phonegap创建一个应用程序,该应用程序使用户可以写下自己在健身房进行的锻炼。问题是,当用户添加另一组或锻炼时,先前输入中的数据将被删除...

HTML:

<div id="exersice-holder" class="exersice-holderStyle">
<div class="exersice">
    <table style="width:100%" id="table-1">
    Exercise: <input placeholder="Input exersice" class="enter-Exercise"></input>
    <tr style="color:white">
        <th>SET</th>
        <th>GOAL</th>
        <th>ACHIEVED</th>
    </tr>
    <tr style="color:white">
        <td class="set">1</td>
        <td><input class="input" value="x"></input></td>
        <td><input class="input" value="kg x reps"></input></td>
  </tr>
    </table>
    <div class="plusSet" onclick="addTableRow(1, 2)" id="table-plus-set-1">+</div>
</div>
    <div class="plusExersice" onclick="addTableExersice(1, 2)" id="table-plus-exersice-1">+</div>
</div>

JS:

function addTableRow(id, set)
    {
        document.getElementById('table-' + id).innerHTML += '<tr style="color:white"><td class="set">'+set+'</td><td><input class="input" style="left:25%" value="x"></input></td><td><input class="input" style="left:60%" value="kg x reps"></input></td></tr>';
        document.getElementById('table-plus-set-' + id).onclick = function() { addTableRow(id, set + 1); };
    }
    function addTableExersice(id, exersice)
    {
        document.getElementById('exersice-holder').innerHTML += '<div class="exersice"><table style="width:100%" id="table-'+exersice+'">Exercise: <input placeholder="Input exersice" class="enter-Exercise"></input><tr style="color:white"><th>SET</th><th>GOAL</th> <th>ACHIEVED</th></tr><tr style="color:white"><td class="set">1</td><td><input class="input" style="left:25%" value="x"></input></td><td><input class="input" style="left:60%" value="kg x reps"></input></td></tr></table><div class="plusSet" onclick="addTableRow('+exersice+', 2)" id="table-plus-set-'+exersice+'">+</div></div>';
        document.getElementById('table-plus-exersice-1').onclick = function() { addTableExersice(id, exersice + 1); };
    }

CSS:

.input
{
    width:100%;
    text-align:center;
}
.set
{
    font-size:20px;
}
.exersice
{
  width: 100%;;
  height: auto;
  top:20%;
  left: 0%;
  color:white;
  border: 1px solid white;
  margin-bottom:20px;
  margin-left: 2px;
}
.exersice table
{
    color:white;
}
td
{
    text-align:center;
}
.plusSet
{
    font-size:30px;
    text-align:center;
    cursor:pointer;
}
.plusExersice
{
    font-size:30px;
    text-align:center;
    cursor:pointer;
    color:white;
    width: 100%;
}
.enter-Exercise
{
    width:70%;
}
.exersice-holderStyle
{
    text-align:center;
    width: 100%;
}

我可以以某种方式在