如何在JavaScript中用localStorage/sessionStorage存储多条聊天消息

直接上修改后的完整代码：

// 页面加载时初始化聊天记录
window.onload = function() {
  loadChatMessages();
};

function pridat() {
  // 获取输入框的消息内容，去除首尾空格
  const msg = document.sample.message.value.trim();
  if (!msg) return; // 空消息不发送

  // 从localStorage获取现有消息数组，没有则初始化空数组
  let messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
  // 添加新消息到数组
  messages.push({
    text: msg,
    sender: 'you', // 标记为用户发送的消息
    time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) // 生成当前时间
  });
  // 更新localStorage存储
  localStorage.setItem('chatMessages', JSON.stringify(messages));

  // 创建消息DOM元素并添加到聊天区
  appendMessageToChat(msg, 'you');
  // 清空输入框
  document.sample.message.value = '';
}

// 加载聊天记录到页面
function loadChatMessages() {
  const chatContainer = document.getElementById('chat');
  chatContainer.innerHTML = ''; // 清空原有内容

  // 添加默认的系统消息（对应你原来的"hey"消息）
  appendMessageToChat('hey', 'system');

  // 获取存储的消息数组
  const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
  // 遍历每条消息渲染到页面
  messages.forEach(msg => {
    appendMessageToChat(msg.text, msg.sender, msg.time);
  });
}

// 通用的消息DOM创建函数
function appendMessageToChat(text, sender, time) {
  const chatContainer = document.getElementById('chat');
  
  // 创建消息外层容器
  const obal = document.createElement('div');
  obal.className = sender;

  // 创建消息内容容器
  const messageDiv = document.createElement('div');
  messageDiv.className = 'message';

  // 创建文本元素
  const textDiv = document.createElement('div');
  textDiv.className = 'text';
  textDiv.textContent = text;

  messageDiv.appendChild(textDiv);
  obal.appendChild(messageDiv);

  // 如果有时间，添加时间元素
  if (time) {
    const timeDiv = document.createElement('div');
    timeDiv.className = 'time';
    timeDiv.textContent = time;
    chatContainer.appendChild(timeDiv);
  }

  chatContainer.appendChild(obal);
}

关键修改说明： #

• 改用数组存储多条消息：原来直接存单个字符串会覆盖旧消息，现在用JSON数组存储每条消息的内容、发送者、时间，实现多消息持久化。
• 消除null显示：页面加载时如果localStorage无数据，用|| []初始化空数组，不会出现null；发送前先判断消息是否为空，避免无效内容存入。
• 封装DOM创建逻辑：把创建消息元素的代码抽成通用函数，减少重复代码，也方便统一调整样式结构。
• 动态生成消息时间：替换原来的固定时间，每条消息自动生成当前发送时间，加载时同步显示。
• 优化用户体验：发送消息后自动清空输入框，避免重复发送同一条内容。

注意事项： #

确保你的HTML结构和原来一致：聊天区id为chat，表单name为sample，输入框name为message。

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