Zapisz i wczytaj wartości wejściowe za pomocą pamięci lokalnej?

Question

Próbuję przechowywać przez lokalną pamięć masową wszystkie wartości pól formularza (pod identyfikatorem wejściowym), tak jak to localStorage.setItem("input id", fieldvalue);, gdy użytkownik kliknie przycisk "zapisz". powodem jest to, że w późniejszym terminie użytkownik ma możliwość ponownego załadowania wartości pola formularza zamiast przepisywania wszystkiego, co jest problemem, a identyfikator i nazwy pól nie są znane, ponieważ są generowane w zależności od tego, co wybierze użytkownik na poprzedniej stronie (jaki szablon wybiorą).

Demo (powiedzmy to zostało wygenerowane):

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

bo nie wiem, identyfikatory wejściowych, nie mogę po prostu napisać:

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

I to samo dotyczy obciążenia funkcja

// 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"); 

    } 
} 

Jestem bardzo nowa w JavaScript, ponieważ jestem pewien, że możesz powiedzieć jakąkolwiek pomoc, kod lub linki będą doceniane d i działające skrzypce js byłyby niewiarygodne (o ile nie polegają na wcześniejszej znajomości identyfikatora wejścia itp.) Spędziłem kilka godzin próbując to zrobić i zmarnowałem jeszcze więcej czasu, próbując wygenerować JS potrzebny z PHP dopóki nie powiedziano mi, że to straszny sposób.

Answer 1

Jeśli chcesz polegać na jQuery to może pomóc:

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

    }); 
}); 

Polecam uniknąć inline-js, więc zaktualizowałem do kodu, aby korzystać .on() do mocowania -handler click z dwoma przyciskami .

Demo

referencyjny:

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