saving-and-draft.html

<script>
/**
 * Save an item to the local storage.
 */
function saveToLocalStrorage(event) {
    const formValue = event.val(); // pick the text the user entered into the form
    const formName = event.name; // pick up the name of the input box from the event
    localStorage.setItem(formName, formValue);
}

/**
 * Submit the form to the backend, and if it is successful, clear the email
 * and password field from the localstorage. 
 */
function login(event) {
    event.preventDefault();
    const email = document.getElementById('email');
    const password = document.getElementById('password');

    fetch('http://postdatatobackend.com', {
        method: 'post',
        body: JSON.stringify({email, password})
    }).then(function(response) {
        localStorage.removeItem('email'); // clear all cached value
        localStorage.removeItem('password'); // clear all cached values 
    });
}

// When the page is loaded, Pick values from cache(draft) on page load.
const email = document.getElementById('email');
const password = document.getElementById('password');
email.value = localStorage.getItem('email') || '';
password.value = localStorage.getItem('password') || '';
</script>

<form onsubmit="login">
    <input id="email" name="email" onkeyup="saveToLocalStrorage"/>
    <input id="password" name="password" onkeyup="saveToLocalStrorage"/>
    <button type="submit">Login</button>
</form>