Form Auto-Save (Local Storage) | HTML, CSS & JavaScript

Form Auto-Save (Local Storage) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #20

Project Overview

The Form Auto-Save is a beginner-friendly project built using HTML, CSS, and JavaScript. It automatically saves the information entered into the form using the browser’s localStorage. Users can refresh the page or return to it later without losing their previously entered information. The form contains fields for a name, email, and message. JavaScript saves the values whenever the user types something into these fields. Additionally, the application displays a save status so users know that their information has been stored.

This project helps beginners understand how browser storage works with JavaScript. It also introduces important concepts such as localStorage, event listeners, input values, DOM manipulation, and functions.

Key Features

Automatic Data Saving: The application saves the name, email, and message whenever the user changes the form fields. Therefore, users do not need to press a separate save button.
Local Storage: JavaScript uses the browser’s localStorage to store the form information. The saved values remain available even after the user refreshes the webpage.
Data Restoration: When the page loads, JavaScript retrieves the previously saved values from local storage. As a result, users can continue working without entering the information again.
Save Status: A status message displays Saved ✔ when the application stores the form data. This gives users clear feedback while they work with the form.
Clear Form: The Clear Form button removes the saved information from local storage and clears all input fields. The status message then changes to indicate that the form has been cleared.
Multiple Form Fields: The project includes separate fields for the user’s name, email, and message. Each field saves its value independently in local storage.
Real-Time Updates: It saves changes as the user types. Therefore, the latest information remains available without requiring manual submission.
Simple Interface: This project uses a clean card-style layout with clear input fields and a simple action button. which makes the project easy to understand and use.
Responsive Design: The Form Auto-Save interface can adapt to different screen sizes. As a result, users can comfortably work with the form on desktops, tablets, and mobile devices.
Easy to Extend: Developers can expand the project by adding more fields, validation, timestamps, draft recovery, or additional storage options.

What You'll Learn

Understand how browser localStorage works.
Learn how to save information using localStorage.setItem().
Practice retrieving data with localStorage.getItem().
Learn how to remove saved data using localStorage.removeItem().
Understand how the load event works.
Practice handling input events with JavaScript.
Learn how to read values from form fields.
Understand how arrays can group multiple HTML elements.
Practice using forEach() with form inputs.
Learn how JavaScript updates status messages dynamically.
Understand how functions can manage repeated tasks.

HTML Code

HTML creates the basic structure of the Form Auto-Save application. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the form. The main content is placed inside the .form-container, which contains the heading, description, input fields, status message, and Clear Form button.

These #name and #email inputs collect the user’s name and email address. Meanwhile, the #message textarea provides space for entering a longer message and the #status paragraph displays the current save status.

Finally, the Clear Form button uses onclick="clearForm()" to call the JavaScript function that removes the saved information. The script.js file is loaded at the bottom of the <body> so JavaScript can access these elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Auto-Save Form</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="form-container">
    <h2>Auto-Save Form</h2>

    <p class="desc">
      Your data is saved automatically to prevent loss if you refresh or leave the page.
    </p>

    <input type="text" id="name" placeholder="Your Name" />
    <input type="email" id="email" placeholder="Your Email" />
    <textarea id="message" placeholder="Your Message"></textarea>

    <p class="status" id="status">Saved ✔</p>

    <button onclick="clearForm()">Clear Form</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the Form Auto-Save application. The body uses Flexbox with justify-content and align-items to center the form on the page. Meanwhile, the .form-container creates the main card with a white background, padding, rounded corners, centered text, and a box shadow.

These input and textarea selectors give the form fields full width, padding, borders, and rounded corners. The textarea also uses a fixed height and disables resizing. Additionally, the .status class styles the save message with a smaller font and green color. Finally, the button selector creates a full-width button with padding, a red background, white text, and a pointer cursor.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  background: #ffffff;
  width: 350px;
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 10px;
}

.desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
}

textarea {
  resize: none;
  height: 80px;
}

.status {
  font-size: 12px;
  color: green;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #ef4444;
  color: white;
  cursor: pointer;
}

Javascript Code

JavaScript handles the auto-save and data recovery functionality. First, it selects the name, email, message, and status elements using document.getElementById(). When the page loads, the load event retrieves the saved values from localStorage and places them back into the corresponding form fields.

Next, JavaScript adds an input event listener to each form field. Whenever the user types, the code uses localStorage.setItem() to save the current name, email, and message values. The status text then changes to Saved ✔, giving the user immediate feedback.

Finally, the clearForm() function removes all three saved values using localStorage.removeItem(). It also clears the form fields and changes the status message to Form cleared. Therefore, users can easily remove their saved information whenever they want.

const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const messageInput = document.getElementById("message");
const status = document.getElementById("status");

/* Load saved data */
window.addEventListener("load", () => {
  nameInput.value = localStorage.getItem("name") || "";
  emailInput.value = localStorage.getItem("email") || "";
  messageInput.value = localStorage.getItem("message") || "";

  if (nameInput.value || emailInput.value || messageInput.value) {
    status.innerText = "Saved ✔";
  }
});

/* Auto-save on input */
[nameInput, emailInput, messageInput].forEach(input => {
  input.addEventListener("input", () => {
    localStorage.setItem("name", nameInput.value);
    localStorage.setItem("email", emailInput.value);
    localStorage.setItem("message", messageInput.value);
    status.innerText = "Saved ✔";
  });
});

/* Clear form */
function clearForm() {
  localStorage.removeItem("name");
  localStorage.removeItem("email");
  localStorage.removeItem("message");

  nameInput.value = "";
  emailInput.value = "";
  messageInput.value = "";

  status.innerText = "Form cleared";
  status.style.color = "red";
}