Как сохранить входные данные после обновления в Phonegap - PullRequest
Новая
       42

Как сохранить входные данные после обновления в Phonegap

0 голосов
/ 07 марта 2019

Я использую 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%;
}

Можно ли как-нибудь написать что-то в <'script'>, чтобы входные данные оставались после нажатия кнопки tableExercise / tableRow?

Я ценю любую помощь с этим :) PS. Я новичок в этом, так что извините, если код немного грязный ...

1 Ответ

0 голосов
/ 07 марта 2019

Возможно, это поможет вам сохранить значения в сценариях JavaScript Phonegap: Локальное хранилище

Заданное значение 

localStorage.setItem("mytime", Date.now());

Чтение значения 

var x = localStorage.getItem("mytime");

Doc

https://www.w3schools.com/jsref/obj_storage.asp

...