Gönderilmemiş form verisi nasıl hatırlanır?

Question

Tarayıcıya, kullanıcının daha önce gönderilmemiş olan ve sayfada yenilenmesini sağlayan verilerin girilen verileri etkilemediğini hatırlamalarını nasıl sağlayabilirsiniz?

Kullanıcının bir sayı girdiği bir form var. Başlangıçta, form varsayılan olarak 0 değerine sahiptir. Verileri localStorage'da saklıyorum, böylece tarayıcı verileri hatırlayabilir. Ancak, sayfa yenilendiğinde, kullanıcı tarafından girilen veriler kaybolur ve varsayılan olarak 0 görüntülenir.

Ben jQuery'nin

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

kullanmaya çalıştı ama çalışmıyor (hala localStorage veri bunun için var). Bu konuda bana bir tavsiyede bulunan var mı?

Düzenlendi:

<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> 

Ve aşağıda gibi localStorage veri ekliyorum:

//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

kullanım çerez: çerez silinmediği sürece

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 hatırlanacak olabilir.

Answer 2

Checkout ben bu codepen o soruna bir fonksiyonel çözüm göstermektedir Benim formu şöyle . Ayrıca jQuery betiğinin DOM'ın hazır olup olmadığını kontrol etmesini sağlamanız gerekir, bunu .ready() için $(function() { }) kısa bir el kullanarak yapabilirsiniz.

$(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)); 
    }); 
});