How to permanently update HTML table given user inputed data

Question

I have a table with ping-pong standings tracking the players' wins and losses. I implemented a feature that allows the players to put in their own games and update the score, but the problem is that once the page refreshes, any changes made are lost, and the standings revert to the original table hardcoded in the HTML file. I thought about writing and saving the new table to a separate HTML file and importing that over the old table whenever I update the scores, but I can't figure it out. Can I do this with local storage, or does that not save information permanently?

Any suggestions?

Here's the relevant code

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>

localStorage is not permanent, it can be [cleared by some actions](https://stackoverflow.com/questions/8537112/when-is-localstorage-cleared). You are essentially describing a database, and I think that this [post](https://stackoverflow.com/questions/73263942/how-to-write-to-a-file-from-a-javascript-function-after-clicking-on-a-button-in) will help answer your question. Short answer: you cannot create or write to files from JavaScript running in a browser. (Other folks more knowledgeable than me, feel free to nuke my statement from orbit) — Jake, Mar 10 '23 at 02:13

score 0 · Answer 1 · answered Mar 10 '23 at 02:43

You can use local storage to save the updated table by storing key, value pairs in the web browser. You can reload the page without losing data. But as @Jake said local storage is not permanent.

However, if you want to use local storage here's how to do it.

You need to update the updateScores() function to store the updates to local storage after updating the table.

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

Then when the page loads, you can retrieve the standings from the local storage and update the table.

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;
  }
}

How to permanently update HTML table given user inputed data

1 Answers1