如何避免基于express.js与socket.io的聊天页面刷新丢失数据？

当然有办法啦！目前你的聊天内容只存在浏览器的内存里，页面一刷新内存就清空了，所以记录没了。咱们可以从客户端本地存储或者服务端持久化存储两个方向来解决，我给你具体说说：

方案一：用客户端本地存储（LocalStorage） #

这个方法最简单，不需要修改服务端代码，把聊天记录存在用户自己的浏览器里，页面加载时再读出来渲染。

修改后的客户端代码如下：

var socket = io();
var nickname = prompt("Whats your name?");
var input = document.getElementById("text-input");
var container = document.getElementById("chat-container");

// 页面加载时，读取本地存储的聊天历史并渲染
window.onload = function() {
  const savedChats = localStorage.getItem('chatHistory');
  if (savedChats) {
    container.innerHTML = savedChats;
  }
}

input.addEventListener("keydown", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    if (input.value !== "") {
      const fullMessage = `${nickname}: ${input.value}`;
      socket.emit("chat-message", fullMessage);
      // 发送消息后更新本地存储
      updateLocalChatHistory(fullMessage);
      input.value = "";
    }
  }
})

socket.addEventListener("chat-message", function(message) {
  container.innerHTML += message + "</br>";
  // 收到消息后也更新本地存储
  updateLocalChatHistory(message);
})

// 封装更新本地存储的函数，避免重复代码
function updateLocalChatHistory(newMsg) {
  let currentHistory = localStorage.getItem('chatHistory') || '';
  currentHistory += newMsg + "</br>";
  localStorage.setItem('chatHistory', currentHistory);
}

这个方案的优缺点： #

• ✅ 优点：实现简单，零服务端改动，快速生效
• ❌ 缺点：聊天记录只存在当前用户的浏览器里，换设备、清缓存就没了；其他用户看不到之前的历史记录

方案二：服务端持久化存储（数据库） #

如果想要所有用户都能看到历史聊天记录，换设备也能加载，那就得把消息存在服务端的数据库里。这里我用MongoDB+Mongoose举例子，你也可以用MySQL、SQLite等其他数据库。

第一步：修改服务端代码 #

先安装依赖：

npm install mongoose

然后更新服务端代码：

var express = require("express");
var app = express();
var server = require('http').createServer(app);
var io = require("socket.io").listen(server);
var path = require("path");
const mongoose = require('mongoose');

// 连接本地MongoDB（注意：如果是线上环境要换成你的数据库地址）
mongoose.connect('mongodb://localhost:27017/chatApp')
  .then(() => console.log('成功连接MongoDB'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 定义消息的数据库模型
const Message = mongoose.model('Message', {
  content: String,
  nickname: String,
  timestamp: { type: Date, default: Date.now } // 记录消息发送时间
});

app.use(express.static(path.join(__dirname, "public")));
app.set("view engine", "ejs");

server.listen(process.env.PORT || 3000, function() {
  console.log("Server listening");
})

app.get("/", function(req, res) {
  res.render("chat");
})

io.sockets.addListener("connection", async function(socket) {
  // 新用户连接时，把历史消息发送给他
  const historyMessages = await Message.find().sort({ timestamp: 1 });
  socket.emit('chat-history', historyMessages.map(msg => `${msg.nickname}: ${msg.content}`));

  socket.addListener("chat-message", async function(message, nickname) {
    // 把新消息保存到数据库
    await Message.create({ content: message, nickname });
    // 广播给所有用户
    io.sockets.emit("chat-message", message, nickname);
  })
})

第二步：修改客户端代码 #

更新客户端代码，接收服务端发送的历史消息并渲染：

var socket = io();
var nickname = prompt("Whats your name?");
var input = document.getElementById("text-input");
var container = document.getElementById("chat-container");

// 接收服务端发来的历史消息，渲染到页面
socket.addEventListener('chat-history', function(history) {
  history.forEach(msg => {
    container.innerHTML += msg + "</br>";
  });
})

input.addEventListener("keydown", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    if (input.value !== "") {
      const msgContent = input.value;
      // 这里把昵称和消息内容分开传给服务端，方便存数据库
      socket.emit("chat-message", msgContent, nickname);
      input.value = "";
    }
  }
})

socket.addEventListener("chat-message", function(message, nickname) {
  container.innerHTML += `${nickname}: ${message}` + "</br>";
})

这个方案的优缺点： #

• ✅ 优点：所有用户共享历史记录，换设备也能加载，数据更安全
• ❌ 缺点：需要配置数据库，代码改动稍多，适合需要多用户同步的场景

你可以根据自己的需求选择方案，如果只是个人测试或者小范围使用，方案一足够；如果是正式的多用户聊天应用，方案二更合适。

内容的提问来源于stack exchange，提问作者Kamran Poladov