У меня есть таблица HTML и 6 полей ввода, которые требуют, чтобы пользователь вводил данные, и когда пользователь нажимает на поле ввода, отображается сохранение, поэтому, когда пользователь обновляет / перезагружает или закрывает веб-страницу и открывает веб-страницу резервное копирование данных должно показать то, что он ввел ранее.

Я попробовал простой метод с использованием локального хранилища, чтобы получить данные, введенные пользователем для сохранения и отображения для первого поля ввода («FY»), но не работал, потому что он вступает в конфликт, когда я пытаюсь получить и сохранить данные из того же места. . так что просто чтобы увидеть, работает ли он, заставил строку кода отображаться под полем FY, если, когда пользователь вводит какие-либо данные, он будет сохранять и показывать, но не работает. Любая помощь будет оценена

function startTime() {
  var today = new Date();
  //                   1    2    3    4    5    6    7    8    9   10    11  12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33
  var suffixes = ['', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd'];

  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";

  var month = new Array(12);
  month[0] = "January";
  month[1] = "February";
  month[2] = "March";
  month[3] = "April";
  month[4] = "May";
  month[5] = "June";
  month[6] = "July";
  month[7] = "August";
  month[8] = "September";
  month[9] = "October";
  month[10] = "November";
  month[11] = "December";

  document.getElementById('txt').innerHTML = (weekday[today.getDay()] + ',' + " " + today.getDate() + '<sup>' + suffixes[today.getDate()] + '</sup>' + " " + month[today.getMonth()] + " " + today.getFullYear() + " Time:   " + today.toLocaleTimeString());
  t = setTimeout(function() {
    startTime()
  }, 500);
}

// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("FY", document.getElementById("FY"));
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("FY");
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
.center {
  margin-left: auto;
  margin-right: auto;
}

.aligned {
  display: flex;
  align-items: center;
}

span {
  padding: 10px;
}

.image {
  display: flex;
  align-items: center;
}

span {
  padding: 10px;
}

.corner {
  display: flex;
  align-items: right;
}

span {
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  margin-left: 320px;
  margin-right: 770px;
  margin-top: -748px;
}

th,
td {
  border: 1.5px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 1.5px
}

.html2canvas {
  width: 1700px !important;
  height: 1700px !important;
}

table tr {
  background: #ffdead;
}

table tr:nth-of-type(2) {
  background: white;
}

text-align: center;
body {
  background-color: #66b032;
}

h1,
th,
td {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

sup {
  vertical-align: super;
  font-size: smaller;
}
<div class="section">
  <form name="apSafety" id="" apSafety "" method="post" action="" enctype="multipart/form-data" onsubmit="return validateChecklistForm()">
    <div class="aligned">
      <span>&emsp;&emsp;&emsp;<img src="Wal.png" width="120" height="130" alt=""></span> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
      <b><h1>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Woodland DC </h1></b><b><h1 style="font-size:70px;">&nbsp;Safety Stats</h1></b>
    </div>
    <table class="center">
      <thead>
        <tr>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>April Daily<br>Stats<br>&emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>FY Goal % &emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>OIR &emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>Recordable Incidents &emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>PIT Incidents &emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>Total Incidents &emsp;<br></th>
          <th style="text-align:center;font-weight: bold;font-size:25px;"><br>Days OIR Free &emsp;<br></th>
        </tr>
      </thead>
      <tr>
        <td>
          <!-- Today's Date is : &nbsp;<label id="text"></label>-->
          <div id="txt" style="text-align:center;font-weight: bold;font-size:27px;"></div>
          &emsp;
        </td>
        <td>
          &emsp;
          <label for="FY"></label><br><input style="background-color: #151313;text-align:center;height:80px;width:250px;color: #FFFFFF;font-weight: bold;font-size:65px;" type="text" id="FY" name="FY" value=" "><br>
          <div id="result"></div>
          &emsp;
        </td>
        <td>
          &emsp;
          <label for="OIR"></label><br><input style="background-color: #339214;text-align:center;height:80px;width:250px;color: ##151313;font-weight: bold;font-size:65px;" type="text" id="OIR" name="OIR" value=" "><br> &emsp;
        </td>
        <td>
          &emsp;
          <label for="RI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="RI" name="RI" value=" "><br> &emsp;
        </td>
        <td>
          &emsp;
          <label for="PIT"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="PIT" name="PIT" value=" "><br> &emsp;
        </td>
        <td>
          &emsp;
          <label for="TI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="TI" name="TI" value=" "><br> &emsp;
        </td>
        <td>
          &emsp;
          <label for="daysFree"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="daysFree" name="daysFree" value=" "><br> &emsp;
        </td>
      </tr>
    </table>
    <b><h1 style="font-size:50px;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Push instead of Pull</h1></b>
    <div class="image">
      <span>
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<img src="Safety1.png" width="450" height="500" alt="">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;<img src="Safety2.png" width="850" height="450" alt=""></span>
    </div>
    <div class="corner">
      <span>
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                        &emsp;<img src="Walls.png" width="255" height="75" alt=""></span>
    </div>
  </form>
</div>
0
TeamKnights 11 Май 2021 в 23:07

1 ответ

Лучший ответ

Вы можете использовать событие input слушатель, чтобы сохранить данные в localStorage . Замените SOME_ELEMENT для тех элементов, которые вы хотите использовать, а SOME_DATA_KEY предпочитаемым ключом localStorage.

Изменить: используйте input прослушиватель событий

// Note: store your input element in a variable and replace SOME_ELEMENT with the variable
SOME_ELEMENT.addEventListener('input', function() {
    localStorage.setItem(SOME_DATA_KEY, SOME_ELEMENT.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
SOME_ELEMENT.value = localStorage.getItem(SOME_DATA_KEY);

Пример (с использованием переменной с идентификатором FY):

// Note: store your input element in a variable and replace SOME_ELEMENT with the variable
let FY = document.getElementById('FY');
FY.addEventListener('input', function() {
    localStorage.setItem('FY', FY.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
FY.value = localStorage.getItem('FY');

Изменить: Не использовать перед загрузкой как то ненадежно выстрелил.

Вы также можете использовать другое событие для записи значения элемента в localStorage. Например, вы могли бы использовать beforeunload.

1
bub 11 Май 2021 в 20:27