자바 스크립트를 통해 localStorage에 값 저장

Question

내 목표는 하나의 함수로 특정 형식의 양식을 통해 제출 된 데이터를 저장하고 다른 함수로 데이터를 검색하는 것입니다. 양식에 여러 개의 입력 태그와 두 개의 선택 태그가 있습니다.

function storage() { 
    if (typeof(Storage) != "undefined") { 
     var elements = document.getElementsByTagName('input'); 
     for (var input in elements) { 
      input.value = localStorage.getItem(input.name); 
     } 
     var elements = document.getElementsByTagName('select') 
     for (var select in elements) { 
      select.value = localStorage[select.name]; 
    } 

    } 
    alert("Success?"); 
} 

function onSubmit() { 
    inputs = document.forms["forsendur"].getElementsByTagName("input"); 
    selects = document.forms["forsendur"].getElementsByTagName("select"); 
    for (var i=0; i<inputs.length; i++) { 
     localStorage.setItem(inputs[i].name, inputs[i].value); 
    } 
    alert("Success?"); 
} 

이 스토리지() 함수를 호출하는 별도 입력 된 태그이다 :

<form action="cool_url" name="forsendur" method="post"> 
    <lots of input and select tags> 
    <input class="button2" type="submit" value="Reikna" onClick="onSubmit();"/> 
</form> 

:

<input type="button" class="button2" value="Last session" onClick="storage();"> 

이가 (일부 생략) 형태를 이렇게 JS 코드 그러나 아무 것도 일어나지 않습니다. 데이터가 양식을 통해 올바르게 전송되고 있음을 확인할 수 있습니다. 나는 두 개의 alert() 호출을 포함 시켰는데, 이는 호출되어 함수가 호출되어 실행됩니다.

Answer 1

저장 기능의 for 루프에 문제가 있습니다. 당신은 당신의 onSubmit 함수에서 하나의 일치를 다시 작성하여 문제를 해결할 수 있습니다 : 당신이 jquery 태그를 사용하고 있기 때문에,

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

    var elements = document.getElementsByTagName('input'); 
    for (var i=0; i<elements.length; i++) { 
     elements[i].value = localStorage.getItem(elements[i].name); 
    } 

    var elements = document.getElementsByTagName('select') 
    for (var i=0; i<elements.length; i++) { 
     elements[i].value = localStorage[elements[i].name]; 
    } 
    } 
} 

Answer 2

글쎄, 나도 같은 다음되는 구현 한 다음 예를 사용합니다 "상황" 해결하려고하지만 다른 방법으로 코드 줄을 줄이기 때문에 도움이되기를 바랍니다.

라이브 데모 :이 http://jsfiddle.net/oscarj24/3Pa6Z/

---

HTML :당신이 당신의 질문에 쓴 팔로우 한 input 및 select을 추가했습니다. 많은 요소를 가질 수 있지만 각 요소에 name 속성을 추가하는 것을 잊지 마십시오.

<form action="/echo/json/" name="form" method="post"> 
    <!-- Test input/select --> 
    Name: <input type="text" name="name" value="Oscar" /><br> 
    Gender: 
    <select name="gender"> 
     <option value="M">Male</option> 
     <option value="F">Female</option> 
    </select><br> 
    <!-- Test input/select --> 
    <input class="btn" type="submit" value="Send" /> 
</form> 

jQuery를 :의견을 읽어 보시기 바랍니다!

// Document ready handler 
$(function() { 
    // Get form 
    var frm = $('form'); 

    // Form submit handler 
    frm.on('submit', function() { 
     // Get all form elements as javascript object 
     var frmData = frm.serializeArray(); 

     // Check if object is not empty and if local storage 
     // is available to store form data using their names and values 
     if(!$.isEmptyObject(frmData) && hasStorage()) { 
      for(var i = 0; i < frmData.length; ++i) { 
       var elem = frmData[i]; 
       localStorage.setItem(elem.name, elem.value); 
      } 
     } 
    }); 

    //TODO: Remove after testing 
    if(hasStorage()) { 
     // Print stored values, at first time 'Name' and 'Gender' will be 'null' 
     console.log('Name: ' + localStorage.getItem('name')); 
     console.log('Gender: ' + localStorage.getItem('gender')); 

     // Remove all stored values 
     localStorage.clear(); 
    } 
}); 

// Used to check if localStorage feature is supported 
function hasStorage() { 
    return (typeof(Storage) !== 'undefined'); 
}