2014-12-30 16 views
7

Kullanıcıların verilerini girebileceği bir form yapıyorum. Bu tarihin yerel depolama alanı kullanılarak kaydedilmesini istiyorum. Ancak sayfayı yenilediğimde sadece boy ve kilo hala hatırlanıyor. Ve cinsiyet, sportiflik ve doğum tarihinin de hatırlanmaya çalışılmasında oldukça sıkışıp kaldım.Form verilerini yerel depoya kaydetme ve yenilemede gösterme

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

selam Sen Senaryonu karmaşık hale

cevap

15

. Bunu dene. Bir kez jQuery kullanıyorsanız JSFIDDLE

çalışarak, document.getElementById() gibi, saf javascript ile karıştırmayınız. Ve $('#height').val()'u saklamak için height değişken oluşturmayın, bunu doğrudan kullanabilirsiniz. Kod daha okunabilir.

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