Yerel depolama alanını kullanarak giriş değerlerini kaydedin ve yükleyin?

Question

Bir kullanıcı, "kaydet" düğmesine bastığında, localStorage.setItem("input id", fieldvalue); gibi tüm form alanı değerlerini (giriş kimliğinin altında) yerel depolama yoluyla depolamaya çalışıyorum. nedeni, daha sonraki bir tarihte kullanıcının, problemin giriş kimliğidir ve isim alanlarının bilinmemesi yerine form alanı değerlerini yeniden yükleme seçeneğine sahiptir, çünkü kullanıcının önceki sayfada ne seçtiğine bağlı olarak üretilir (hangi şablonu seçerler). i giriş kimlikleri bilmiyorum çünkü

<input type="text" id="meta_title" name="seo_meta_title"> 
<input type="text" id="meta_description" name="seo_meta_description"> 
<input type="text" id="header" name="header"> 

<!-- Submit form--> 
    <input type="submit" value="Create"> 

<!-- buttons--> 
    <button onclick="save()">save</button> 
    <button onclick="load()">load</button> 

, ben sadece yazamaz:

function save() { 
    if (typeof(Storage) != "undefined") { 

    //some_code_to_insert_value = x, y, z 

    localStorage.setItem("meta_title", x); 
    localStorage.setItem("meta_description", y); 
    localStorage.setItem("header", z); 
    } 
} 

Ve aynı yük için de geçerli

Demosu (en bu oluşturulmuştur diyelim) işlevi

// LOAD 
function load() { 
if (typeof(Storage) != "undefined") { 
    // Adds data back into form fields 

    document.getElementById("meta_title").value = localStorage.getItem("meta_title"); 
    document.getElementById("meta_description").value = localStorage.getItem("meta_description"); 
    document.getElementById("header").value = localStorage.getItem("header"); 

    } 
} 

JavaScript'e çok yeni geldim, eminim ki herhangi bir yardımı anlatabildiğinizden eminim, kod veya bağlantılar çok değerlidir d ve bir çalışma js kemanı (giriş kimliğini bilmeden güvendiği sürece) şaşırtıcı bir şekilde ötesine geçecektir.) Bunu yapmak için birkaç saat harcadım ve ihtiyaç duyulan JS'yi üretmeye çalışırken daha fazla zaman harcadım PHP'ye kadar bu söylendi bunu yapmak için korkunç bir yol oldu.

$('#save').on('click', function(){ 

    $('input[type="text"]').each(function(){  
     var id = $(this).attr('id'); 
     var value = $(this).val(); 
     localStorage.setItem(id, value); 

    }); 
}); 

$('#load').on('click', function(){ 
    $('input[type="text"]').each(function(){  
     var id = $(this).attr('id'); 
     var value = localStorage.getItem(id); 

     $(this).val(value); 

    }); 
}); 

Ben inline-js önlemek için tavsiye ediyorum, bu yüzden iki düğmelere click -handler bağlanması için .on() kullanmak koduna güncelleme: Eğer jQuery güvenmek istiyorsan

Answer 1

bu size yardımcı olabilir .

Demo

Referans:

.each()

Answer 2

Replace Html Code And Script File 
    <form method='post' id='myform'> 
    <input type="text" id="meta_title" name="seo_meta_title"> 
    <input type="text" id="meta_description" name="seo_meta_description"> 
    <input type="text" id="header" name="header"> 

    <!-- Submit form--> 
     <input type="submit" id="save" value="Create"> 

    <!-- buttons--> 
     <button onclick="save()">save</button> 
     <button onclick="load()">load</button> 
    </form> 
    <script> 
    $('#save').on('click', function(){ 
     var post_vars = $('#myform').serializeArray(); 
     localStorage.setItem(id, post_vars); 
    }); 
    </script>