Zapisywanie danych formularza w pamięci lokalnej i wyświetlanie go podczas odświeżania

Tworzę formularz, w którym użytkownicy mogą wprowadzać swoje dane. Chciałbym, aby ta data została zapisana przy użyciu lokalnego magazynu. Ale kiedy odświeżam stronę, tylko wysokość i waga są nadal pamiętane. A ja utknąłem na tym, że staram się również pamiętać o płci, sporcie i urodzinach.Zapisywanie danych formularza w pamięci lokalnej i wyświetlanie go podczas odświeżania

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /> 
    <title>Test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).unload(saveSettings); 
      loadSettings(); 
     }); 

     function loadSettings() { 
      $('#height').val(localStorage.height); 
      $('#weight').val(localStorage.weight); 
      $('#dateOfBirth').val(localStorage.dateOfBirth); 
      $('input[type=radio]:checked').val(localStorage.gender); 
      $("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected"); 
     } 

     function saveSettings() { 
      var height = document.getElementById("height").value; 
      var weight = document.getElementById("weight").value; 
      var sportive = document.getElementById("sportive").value; 
      var gender = $('input[type=radio]:checked').val(); 
      var dateOfBirth = document.getElementById("dateOfBirth").val(); 

      localStorage.height = height; 
      localStorage.weight = weight; 
      localStorage.dateOfBirth = dateOfBirth; 
      localStorage.sportive = sportive; 
      localStorage.gender = gender; 
     } 


    </script> 
</head> 
<body> 
    <div data-role="content"> 

     <form id="myForm" > 

      gender: 

      <input id="man" type="radio" name="gender" value="Man" > 
      <label for="man">Man</label> 

      <input id="vrouw" type="radio" name="gender" value="Vrouw"> 
      <label for="vrouw" >Vrouw</label> 

      dateOfBirth: 
      <input type="date" id="dateOfBirth" name="datum" required /> 

      weight (in kg): 
      <input type="number" id="weight" name="weight" required /> 

      height (in cm): 
      <input type="number" id="height" name="height" required /> 

      Hoeveel keer doe je aan sport per week? 
      <select id="sportive" name="sport"> 
       <option value="1.2" >Weinig of geen training, kantoorwerk</option> 
       <option value="1.375">Lichte training/sport 1-3 dagen per week</option> 
       <option value="1.55" >Gemiddelde training/sport 3-5 dagen per week</option> 
       <option value="1.725" >Zware training/sport 6-7 dagen per week</option> 
       <option value="1.9" >Zware dagelijkse training/sport plus lichamelijk werk</option> 
      </select> 

      <br /> 

     </form> 

    </div> 
</body>

pozdrowienia

Źródło

2014-12-30 user3141908

Jesteś komplikuje skrypt. Spróbuj tego. Praca JSFIDDLE

Jeśli używasz jQuery raz, nie mieszać go z czystego javascript, jak document.getElementById(). I nie twórz zmiennej height do przechowywania $('#height').val(), możesz jej użyć bezpośrednio. Kod jest bardziej czytelny.

$(document).ready(function() { 
    $(window).unload(saveSettings); 
    loadSettings(); 
}); 

function loadSettings() { 
    $('#height').val(localStorage.height); 
    $('#weight').val(localStorage.weight); 
    $('#dateOfBirth').val(localStorage.dateOfBirth); 
    $('input[value="' + localStorage.gender + '"]').prop('checked', true); 
    $("#sportive").val(localStorage.sportive); 
} 

function saveSettings() { 
    localStorage.height = $('#height').val(); 
    localStorage.weight = $('#weight').val(); 
    localStorage.dateOfBirth = $('#dateOfBirth').val(); 
    localStorage.sportive = $("#sportive").val(); 
    localStorage.gender = $('input[type=radio]:checked').val(); 
}

Źródło

2014-12-30 15:00:29 vaso123

Zapisywanie danych formularza w pamięci lokalnej i wyświetlanie go podczas odświeżania

Odpowiedz

Powiązane problemy