Autosave
<form class="save-me" id="save-me">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="address">Address</label>
<input type="text" name="address" id="address">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="more">Additional thoughts?</label>
<textarea name="more" id="more"></textarea>
<p>
<button type="submit">Submit</button>
</p>
</form>
<script>
var storagePrefix = 'form-autosave_';
var inputHandler = function (event) {
if (!event.target.closest('#save-me')) return;
var id = getID(event.target);
if (!id) return;
localStorage.setItem(storagePrefix + id, event.target.value);
};
var submitHandler = function (event) {
if (event.target.id !== 'save-me') return;
clearData();
}
var getID = function (field) {
if (field.id.length > 0) {
return field.id;
}
if (field.name.length > 0) {
return field.name
}
return null;
};
var loadData = function () {
var fields = document.querySelectorAll('#save-me input, #save-me textarea');
Array.prototype.slice.call(fields).forEach(function (field) {
var id = getID(field);
if (!id) return;
var saved = localStorage.getItem(storagePrefix + id);
if (!saved) return;
field.value = saved;
});
};
var clearData = function () {
var fields = document.querySelectorAll('#save-me input, #save-me textarea');
Array.prototype.slice.call(fields).forEach(function (field) {
var id = getID(field);
if (!id) return;
localStorage.removeItem(storagePrefix + id);
});
};
loadData();
document.addEventListener('input', inputHandler);
document.addEventListener('submit', submitHandler);
</script>