Jak zapamiętać dane formularzy, które nie zostały przesłane?

Question

W jaki sposób można sprawić, aby przeglądarka zapamiętała, co użytkownik wpisał w formularzu, który nie został jeszcze przesłany i czy odświeżenie strony nie ma wpływu na wprowadzone dane?

Mam formularz, w którym użytkownik wprowadza numer. Początkowo formularz ma domyślnie wartość 0. Przechowuję dane w localStorage, aby przeglądarka mogła zapamiętać dane. Jednak po odświeżeniu strony dane wprowadzone przez użytkownika znikają, a domyślnie wyświetlana jest wartość 0. (Wciąż dane localStorage istnieje dla niego)

Próbuję użyć jQuery

$(".formClassName").val(localStorage.getItem(key)); 

ale to nie działa. Czy ktoś może mi doradzić? Dziękuję z góry.

Zmieniano: Moja postać wygląda następująco:

<form> 
    <!--There are multiple forms, and the only difference among them is the "name" attribute --> 
    Enter a number <input type="text" value="0" class"dataEntered" name="****"> 
    <!--The button below saves the data entered in the above form --> 
    <input type="button" class="savedata" value="Save Value" name="****"> 
</form> 

I dodaję dane do localStorage jak poniżej:

//JavaScript 
<script> 
//Using on because the website retrieves the above form dynamically 
$(document).on("click", ".saveData", function(e){ 
    //retrieve the number entered in the form 
    var userNum = $(this).siblings(".dataEntered").val(); 
    //retrieve the value in name attribute 
    var thisFormName = $(this).attr("name"); 
    //store the data 
    localStorage.setItem(thisFormName, userNum); 

    //Now that the save button has been pressed (not submitted to the 
    //server yet), and the data is stored in localStorage, I want to 
    //the page to show the number in userNum even after you refresh the page 
    //but this does not work. 
    $(".dataEntered").val(localStorage.setItem(thisFormName)); 

}); 
</script> 

Answer 1

stosowanie cookies:

function addCookie(sName,sValue,day) { 
    var expireDate = new Date(); 
    expireDate.setDate(expireDate.getDate()+day); 
    document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString(); 
} 
function getCookies() { 
    var showAllCookie = ''; 
    if(!document.cookie == ''){ 
    var arrCookie = document.cookie.split('; '); 
    var arrLength = arrCookie.length; 
    var targetcookie ={}; 
    for(var i=0; i<arrLength; i++) { 
     targetcookie[unescape(arrCookie[i].split('=')[0])]= unescape(arrCookie[i].split('=')[1]); 
     } 
    return targetcookie; 
} 

---

addCookie('type','1',1024); 
var cookiesample = getCookies(); 
$(".formClassName").val(cookiesample.type); 

cookiesample.type mógłby być zapamiętany chyba cookie są usuwane.

Answer 2

Checkout to codepen mam to pokazuje funkcjonalne rozwiązanie problemu . Musisz również upewnić się, że skrypt jQuery sprawdza, czy DOM jest gotowy, możesz to zrobić, używając skrótu $(function() { }) dla domeny .ready().

$(function() { 
    var input = $("[type=text]"); 
    var thisFormName = input.attr("name"); 

    if (localStorage.getItem(thisFormName)) { 
    var value = parseInt(localStorage.getItem(thisFormName)); 
    input.val(value); 
    } 

    $(document).on("click", ".savedata", function(e) { 
    var userNum = input.val(); 
    localStorage.setItem(thisFormName, userNum); 
    input.val(localStorage.getItem(thisFormName)); 
    }); 
});