刷新页面后在表格上保留用户评论

Posted 2023-03-05

【中文标题】刷新页面后在表格上保留用户评论

【英文标题】：Keep user comments on table after refresh page

【发布时间】：2021-04-20 03:01:18

【问题描述】：

我正在创建一个用户可以进入并编辑表格的表格，我创建了一个脚本，它将添加到表格中，但是当页面刷新时 cmets 消失了。我已经读到我需要一些额外的工具来在我的 html 页面上保存 cmets。有没有办法让 cmets 保存在桌子上？

感谢任何反馈。

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

【问题讨论】：

您可以将数据保存到window.localStorage。

【参考方案1】：

如果你对服务端不熟悉，可以在客户端使用localStorage来解决。

只读的localStorage 属性允许您访问Storage 文件来源的对象；存储的数据保存在 浏览器会话

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

【讨论】：

假设我也想显示他们的名字并保留它，我是否只需创建另一个 localStorageKey 变量？

是的，您可以使用一个 localStorageKey 将与您的单个应用程序相关的所有信息存储到一个对象中 - 当您获取时，您必须相应地破坏它，或者您也可以使用不同的键存储另一个信息.

【参考方案2】：

HTML 和 Javascript 仅适用于 客户端，只能将数据保存在用户自己的设备上。如果您想存储这些数据并让所有人都能看到，您需要服务器端技术。如Node.js