javascript实现简单留言板案例

下面是“javascript实现简单留言板案例”的完整攻略。

留言板的基本实现

1. 接收用户输入的留言内容：

<form>
  <textarea id="message"></textarea>
  <button id="submit">提交留言</button>
</form>

1. 监听提交留言按钮的点击事件：

document.querySelector('#submit').addEventListener('click', function(event) {
  event.preventDefault();

  // 此处实现留言处理的逻辑，并将留言内容存储在变量message中
});

1. 处理留言内容并更新留言展示：

// 获取留言展示区域的DOM元素
var messageBoard = document.querySelector('#message-board');

// 创建新的留言DOM节点，并添加到留言展示区域
var messageNode = document.createElement('p');
messageNode.textContent = message;
messageBoard.appendChild(messageNode);

示例1：使用LocalStorage存储留言记录

为了让用户可以在不同的页面之间查看自己写的留言，我们可以使用LocalStorage存储留言记录。在留言处理逻辑中添加以下代码：

// 将留言内容存储在LocalStorage中，并在留言展示区域显示留言
var message = document.querySelector('#message').value;
localStorage.setItem('message', message);

var messageNode = document.createElement('p');
messageNode.textContent = message;
messageBoard.appendChild(messageNode);

在页面初始化时，从LocalStorage中读取留言记录并显示：

// 从LocalStorage中读取留言记录，并在留言展示区域显示留言
var message = localStorage.getItem('message');
if (message) {
  var messageNode = document.createElement('p');
  messageNode.textContent = message;
  messageBoard.appendChild(messageNode);
}

注意：LocalStorage存储的是字符串类型，需要注意数据类型的转换。

示例2：使用服务器存储留言记录

如果需要更加稳定可靠的留言保存方式，可以使用服务器存储留言记录。具体实现方式即为向服务器发送POST请求，将留言内容作为请求体发送，服务器接收到请求后将留言记录保存到数据库中。

在留言处理逻辑的基础上，需要使用Ajax技术向服务器发送请求：

var message = document.querySelector('#message').value;

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/messages', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    var messageNode = document.createElement('p');
    messageNode.textContent = response.message;
    messageBoard.appendChild(messageNode);
  }
};
xhr.send(JSON.stringify({ message: message }));

服务器接收到请求后，需要保存留言记录：

app.post('/api/messages', (req, res) => {
  const message = req.body.message;
  // 保存message到数据库
  res.json({ message: message });
});

需要注意的是，在以上代码中使用了Express框架来简化后端代码编写。