Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Form saver project template from https://learnvanillajs.com.

Project Details

Write a script that automatically saves a user's form inputs as they type and reloads them into the form when they come back to the page. Clear the saved data when the form is submitted.

Considerations

  • Does each field need to be it's own entry in localStorage or can they all be saved as one item?
  • Should certain fields be excluded?
  • How can you structure the script so that you can add new fields without having to change your code?

Need help?

This project is part of the Browser Storage pocket guide and video course.

<!DOCTYPE html>
<html>
<head>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
label,
input,
textarea {
width: 100%;
}
label {
font-weight: bold;
}
input,
textarea {
margin-bottom: 2em;
}
textarea {
height: 12em;
}
</style>
</head>
<body>
<h1>Form Saver</h1>
<form id="autosave">
<div>
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div>
<label for="email">Email Address</label>
<input type="email" id="email">
</div>
<div>
<label for="notes">Notes</label>
<textarea id="notes"></textarea>
</div>
<button>Submit</button>
</form>
<script>
// Project code...
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.