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

A Form Auto-Save system built using HTML, CSS, and JavaScript that automatically saves user input in the browser using Local Storage.
The form restores previously entered data when the page is refreshed or revisited, helping prevent accidental data loss and improving user experience.

Key Features

Automatically saves form data while the user types.
Restores saved data on page reload or revisit.
Uses browser Local Storage for persistence.
Displays a clear save status indicator.
Includes an option to clear saved form data.
Clean, responsive, and user-friendly interface.
No manual save or submit action required.

HTML Code

<!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

* {
  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

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";
}