chat storage

HTML <h1>Chat con Local Storage y JavaScript</h1> <div id="chat-container"></div> <input type="text" id="message-input" placeholder="Escribe tu mensaje..."> <button id="send-button">Enviar</button>

CSS #chat-container { height: 300px; width: 600px; border: 1px solid #ccc; padding: 10px; overflow-y: auto; } #message-input { width: 600px; }

JavaScriptdocument.addEventListener('DOMContentLoaded', () => { const chatContainer = document.getElementById('chat-container'); const messageInput = document.getElementById('message-input'); const sendButton = document.getElementById('send-button'); // Función para cargar los mensajes del local storage function loadMessages() { const messages = JSON.parse(localStorage.getItem('messages')) || []; chatContainer.innerHTML = ''; messages.forEach((message, index) => { const div = document.createElement('div'); div.textContent = `${index + 1}. ${message}`; chatContainer.appendChild(div); }); chatContainer.scrollTop = chatContainer.scrollHeight; } // Función para guardar un mensaje en el local storage function saveMessage(message) { const messages = JSON.parse(localStorage.getItem('messages')) || []; messages.push(message); localStorage.setItem('messages', JSON.stringify(messages)); } // Evento para enviar un mensaje sendButton.addEventListener('click', () => { const message = messageInput.value.trim(); if (message) { saveMessage(message); loadMessages(); messageInput.value = ''; } }); // Cargar los mensajes al iniciar el chat loadMessages(); });

Puede cambiar código para ver el resultado

Resultado ↓