2014-12-30 26 views
7

Tôi đang tạo biểu mẫu nơi người dùng có thể nhập dữ liệu của họ. Tôi muốn ngày này được lưu bằng cách sử dụng bộ nhớ cục bộ. Nhưng khi tôi làm mới trang chỉ chiều cao và trọng lượng vẫn còn nhớ. Và tôi đã khá khó khăn khi cố gắng làm cho giới tính, tính thể thao và ngày sinh được ghi nhớ là tốt.Lưu dữ liệu biểu mẫu vào bộ nhớ cục bộ và hiển thị dữ liệu trên làm mới

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

lời chào

Trả lời

15

Bạn đang làm phức tạp thêm kịch bản của bạn. Thử cái này. Làm việc JSFIDDLE

Nếu bạn đang sử dụng jQuery một lần, đừng trộn nó với javascript thuần túy, như document.getElementById(). Và không tạo biến số height để lưu trữ $('#height').val(), bạn có thể sử dụng trực tiếp điều này. Mã dễ đọc hơn.

$(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(); 
} 
Các vấn đề liên quan