Question

我正在尝试添加用户的评论，因此我只是尝试读取输入并将其发送以进行打印，但问题是，刷新页面或输入其他输入后，打印的输入就会消失。

因此，即使刷新页面或重新输入新评论时，我也希望所有用户始终显示。

代码：

<div>
    <input type="text" name="comments" placeholder = "Your comment goes here .. " class = "sug-box" id = "UserComment">
    <button class = "send-box" onclick="go()">Add</button><i class="fa fa-send-o"></i>
    <p id = "t"></p>
  </div>

<script>
  function go(){
      var x = document.getElementById("UserComment").value; 
      document.getElementById("t").innerHTML = x;
  }
</script>

Answer 1

有两种方法可以做到这一点，具体取决于您的用例。

第一个是使用localstorage，这比使用数据库要容易得多，但有一些缺点。如果评论是个人的（表示没有其他人看到），则可以使用Localstorage。问题在于本地存储不安全。

Localstorage是存储在用户计算机上直到删除的一组键/值对。

这是您使用本地存储的方式：

// Place something in localstorage:
window.localStorage.setItem('key', 'value')

//Get something from localstorage:
 window.localStorage.getItem('key')

//Delete item from localstorage
window.localstorage.removeItem('key')

您的完整应用程序可能看起来像这样：

Javascript：

document.getElementById('comment').innerHTML = window.localStorage.getItem('comment') || ''

HTML：


<!DOCTYPE html>
<html>
  <head>
    <title>*title here*</title>
  </head>

  <body>
    <textarea placeholder="Type comment here" id="comment"></textarea>
  <br/>
  <button onmouseup="window.localStorage.setItem('comment',document.getElementById('comment').value)">Submit</button>
  </body>
</html>

第二种方法是使用数据库。

有很多不同的方法可以做到这一点，但是我建议对中间件使用node.js + express，对数据库使用mongodb。

以下是一些可以帮助您入门的链接：

让我知道我是否有任何遗漏和/或误解了这个问题。

Answer 2

我认为我有一个适合您的解决方案。我已经对您的一些代码进行了重命名和重构，如果您愿意，可以随时将其更改回原始版本。对我来说，这更容易阅读。我还将JS放在单独的文件中，但是您可以使用script标记完成相同的任务。

这是指向JSFiddle的链接，该链接在操作JSFiddle User-Comments-App中显示了它。小提琴中的代码已被修改为可以在该站点上使用，请不要关注它，请看下面的示例！您无法在JSFiddle上进行页面刷新，因此我使用“刷新页面”按钮和一个小的计时器功能对其进行了模拟，该功能可以清除列表，然后从本地存储中重新填充它。

HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<!-- calls this function on refresh to pull any coments from local storage -->
<body onload="populateUL()">

  <div>
    <input type="text" name="comments" placeholder = "Your comment goes here .. " class = "sug-box" id = "UserComment">
    <button class = "send-box" onclick="parseUserComment()">Add</button><i class="fa fa-send-o"></i>
    <p id = "t"></p>
  </div>

  <div id="comment-container">
    <ul>
      <!-- <li> items will be inserted here -->
    </ul>
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript

var commentUL = document.getElementById('comment-container').firstElementChild;
var commentNumber = 0;

function parseUserComment() {
  var userComment = document.getElementById("UserComment").value; 
  storeUserComment(userComment, commentNumber);
  displayUserComment(userComment);
  commentNumber++;
}

function displayUserComment(userComment) {
  var li = document.createElement('li');
  li.textContent = userComment; 
  commentUL.appendChild(li);
}

function storeUserComment(userComment, commentNumber) {
  window.localStorage.setItem(`comment-${commentNumber}`, userComment);
}

function populateUL() {
  if (window.localStorage.length > 0) {
    var i;
    for (i = 0; i < localStorage.length; i++) {
      var userComment = window.localStorage.getItem(`comment-${i}`);
      displayUserComment(userComment);
    }
    // we need to reset the counter to begin in the last element of the array when we refresh the page.
    commentNumber = localStorage.length;
  }
}

这里是发生的事情的简要分类，如果您有任何疑问或不清楚的地方，请告诉我。

代码说明

当用户单击“添加”按钮时，parseUserComment（）函数将运行。此功能负责将注释存储在本地存储中，并在屏幕上显示注释。您会注意到，我们将显示注释并将注释存储到帮助程序函数storeUserComment（）和displayUserComment（）的工作。 parseUserComment（）实际上唯一要做的就是获取用户的注释并增加计数器的commentNumber：

var commentNumber = 0;

function parseUserComment() {
  var userComment = document.getElementById("UserComment").value; 
  storeUserComment(userComment, commentNumber);
  displayUserComment(userComment);
  commentNumber++;
}

因此，我们有了用户的注释，然后将userComment传递给帮助程序函数storeUserComment，该函数只是一个使用命名约定'comment- {commentNumber}'将注释添加到本地存储的函数。这意味着第一条评论将为“评论0”，第二条评论为“评论1”。我们像数组一样使用基于0的系统。请注意，使用模板文字可以使我们轻松地将commentNumber连接到字符串：

function storeUserComment(userComment, commentNumber) {
  window.localStorage.setItem(`comment-${commentNumber}`, userComment);
}

存储用户评论后，我们要显示它。并且此功能还将用于在页面刷新时显示用户评论。我们只需创建一个新的“ li”元素，然后使该文本内容成为userComment。然后，我们将该元素添加到位于div.comment-container内部的“ ul”中，使用appendChild（）方法在文件的开头选择了该元素：

// at beginning of file
var commentUL = document.getElementById('comment-container').firstElementChild;

function displayUserComment(userComment) {
  var li = document.createElement('li');
  li.textContent = userComment; 
  commentUL.appendChild(li);
}

因此涵盖了parseUserComment（）函数及其调用的助手。接下来，我们需要查看页面刷新时如何显示用户的评论。为此，我们将一个事件侦听器添加到“ onload”事件的“ body”元素中：

<body onload="populateUL()">

populateUL（）函数将检查本地存储中是否有任何项目，如果有，它将遍历这些项目并为每个项目调用displayUserComment（）函数：


function populateUL() {
  if (window.localStorage.length > 0) {
    var i;
    for (i = 0; i < localStorage.length; i++) {
      var userComment = window.localStorage.getItem(`comment-${i}`);
      displayUserComment(userComment);
    }
// bottom of function left off for clarity

在函数的结尾，我们必须确保将commentNumber设置为localStorage数组的长度，该数组将是最后一个元素。因此，如果您在localStorage中有两个注释，则将具有“ comment-0”和“ comment-1”。 localStorage的长度为2。我们将在循环中打印出“ comment-0”和“ comment-1”，然后“ i”变量将增加为2，然后循环将停止。在这一点上，我们可以将localStorage的长度分配给commentNumber，这样，如果用户想要添加新的注释，它将从2（“ comment-2”）开始编号：

commentNumber = localStorage.length;

如何保持用户输入的打印？

2 个答案: