Keep user comments on table after refresh page

user_14852970 0
Viewed 399

I am working on creating a table where a user can come in and edit the table, I created a script where it would add to the table but when the page refreshes the comments disappear. I have read that I need some additional tools to save comments on my HTML page. Is there a way to keep the comments saved on the table?

Any feedback is appreciated.

<table class="input">
  <th id="lastcomment">Comment</th>
  <th id="lastcommentdate">Tool</th>
  <tr>
    <td>
      <input type="checkbox" id="toggle">
      <label for="toggle">Comment</label>
      <dialog>
        <form id="engcomment">

          <input type="text" name="message" id="user_input">
        </form>

        <input type="submit" onclick="showInput();">
        <label for="toggle">close </label>
      </dialog>
      <p><span id='display'></span></p>
    </td>
    <td></td>
  </tr>

  <script language="JavaScript">
    function showInput() {
      document.getElementById('display').innerHTML =
        document.getElementById("user_input").value;
    }
  </script>
local-storage html-table html json javascript
2 Answers

If you're not familiar with the server-side, you can use localStorage on the client-side to resolve it.

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions

const localStorageKey = "myData";
document.getElementById("user_input").value = getDataFromLocalStorage();
document.getElementById('display').innerHTML = getDataFromLocalStorage();

function showInput() {
  var user_input = document.getElementById("user_input").value;
  setDataToLocalStorage(user_input);
  document.getElementById('display').innerHTML = user_input;
}

function setDataToLocalStorage(newData){
   localStorage.setItem(localStorageKey, newData);
}

function getDataFromLocalStorage(){
  return localStorage.getItem(localStorageKey) || "";
}

Demo on codepen.io

Becasue SO disallowed to use HTML5 local storage on code snippets

enter image description here

user_90719430

HTML and Javascript are only for the client-side which can only save data on the users' own device. If you want to store those data and let everyone able to see it, you need server-side technology. Such as Node.js

user_98148350
Related