javascript 如何永久更新HTML表给定用户输入的数据

6pp0gazn 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(109)

我有一个乒乓球排名表，上面记录着玩家的输赢，我实现了一个特性，允许玩家输入自己的游戏并更新分数，但问题是，一旦页面刷新，所做的任何更改都将丢失。并且排名恢复为HTML文件中硬编码的原始表。我曾想过编写新表并将其保存到一个单独的HTML文件中，然后在每次更新分数时将其导入到旧表中，但我想不出来。还是不能永久保存信息
有什么建议吗？
以下是相关代码

function updateScores() {
  table = document.getElementById("Standings");
  rows = table.rows;
  for (i = 1; i < (rows.length - 1); i++) {
    var wins = rows[i].cells[2];
    var losses = rows[i].cells[3];
    var winNodes = parseInt(wins.childNodes.item(0).data);
    var lossNodes = parseInt(losses.childNodes.item(0).data);
    var percentage = String(Math.round((winNodes / (winNodes + lossNodes)) * 100)) + "%";
    if (winNodes == 0) {
      document.getElementById("win" + String(i)).innerHTML = "0%";
    } else {
      document.getElementById("win" + String(i)).innerHTML = percentage;
    }

  }
}
updateScores()

<table class="center" id="Standings">
  <tr>
    <th onclick="sortTable(0)">Player</th>
    <th onclick="sortTable(1)">Win Percentage</th>
    <th onclick="sortTable(2)">Wins</th>
    <th onclick="sortTable(3)">Losses</th>
  </tr>
  <tr id="Jason">
    <td>Jason</td>
    <td id="win1">0%</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr id="Yair">
    <td>Yair</td>
    <td id="win2">0%</td>
    <td>18</td>
    <td>2</td>
  </tr>
  • • •

</table>

JavaScript

来源：https://stackoverflow.com/questions/75691671/how-to-permanently-update-html-table-given-user-inputed-data

1条答案

按热度按时间

vq8itlhq1#

你可以使用本地存储器来保存更新后的表，方法是在浏览器中存储键和值对，你可以在不丢失数据的情况下重新加载页面，但是正如@Jake所说，本地存储器不是永久的。
但是，如果您想使用本地存储，下面是如何做到这一点。
您需要更新updateScores()函数，以便在更新表之后将更新存储到本地存储。

var standings = table.innerHTML;
localStorage.setItem('standings', standings);

然后，当页面加载时，您可以从本地存储中检索排名并更新表。

window.onload = function() {
  // retrieve the standings from local storage
  var standings = localStorage.getItem('standings');

  if (standings !== null) {
    // update the table
    table = document.getElementById("Standings");
    table.innerHTML = standings;
  }
}

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 如何永久更新HTML表给定用户输入的数据

1条答案

相关问题

热门标签

最新问答