如何保持更新本地存储JavaScript中的数据

Question

I am getting a value from a text field and store it in local storage because I need to show the same value typed by the user back to the text field after some validation. Once the value is stored it doesn't update itself because every time I change the value in the text field I expect to store the same value in the local storage but it only does it one and displays the same value every time it stored the first time.

jsp

<s:textfield name="emailId" id="emailId" label="Email" cssClass="dataFieldCell3" value="%{#signerslist.email}"  />

JS

setting the variable in local storage

function showEmail() {
    var email = document.getElementById("emailId").value;
    localStorage.setItem("invalidEmail", email);
} 

getting it and assign it back in the text field

function emailValidationErrorMessage() {
    if('${emailValidationMessage}' !== "") {
        $("#Signers").show();
        var getEmailValue = localStorage.getItem("invalidEmail");
        document.getElementById("emailId").value = getEmailValue;
    }
}

Please guide...

Thanks :)

Answer 1

...every time I change the value in the text field I expect to store the same value in the local storage...

Then, the showEmail function needs to be set as the callback function for the text field's change event so that localStorage will be updated each time the user changes the value in the text field.

document.getElementById("emailId").addEventListener("change", showEmail);