Creating an HTML CSS JavaScript Message Saving System

Have you ever wanted to create a simple messaging system where users can type something, save it, and view it on another page? With just HTML, CSS, and JavaScript, you can achieve this functionality using the localStorage API. In this guide, we'll walk through how to create the input form and the display page, and provide you with the full code snippets.

1. Input Page

The input page is where users will type their messages and submit them. We'll use JavaScript to capture the message, store it in the browser's localStorage, and then redirect the user to the display page.

HTML

!DOCTYPE html Message Input Page

Send a Message

Message: Send const messageForm ('messageForm'); ('submit', function(event) { // Prevents the page from reloading (); // Get the message from the input field const message ('messageInput').value; // Save the message to localStorage ('userMessage', message); // Redirect to the display page ''; }); " "

2. Display Page

The display page retrieves the saved message from localStorage and shows it on the screen. This page is a placeholder for the messages that users have sent from the input page.

HTML

!DOCTYPE html Message Display Page

Your Message

// Get the message from localStorage const savedMessage ('userMessage'); // Display the message on the page if (savedMessage) { ('displayMessage').textContent savedMessage; } else { ('displayMessage').textContent 'No message found!'; }

How It Works

The input page allows users to type a message and send it. When they hit the Submit button, the message is captured, saved in the browser's localStorage, and the user is redirected to the display page.

The display page retrieves the saved message from localStorage and shows it on the screen. This ensures that the message persists even if the user refreshes the page or closes and reopens the browser.

Key Points

LocalStorage: The data is stored on the user's browser, so the message will persist even if they refresh the page or close and reopen the browser. Simple Use Case: This solution works well for simple use cases, but if you want to build a real messaging system where multiple users can send messages, you'll need a server and a database.

With these basic steps and code snippets, you can create a simple messaging system using just HTML, CSS, and JavaScript. Happy coding!