localStorage 값은 항상 Null with Javascript를 사용합니다.

Question

하나의 함수를 사용하여 localStorage에 값을 전송하고 다른 함수를 검색하여 웹 페이지의 해당 입력 필드에 입력합니다.

내 문제는 두 가지입니다. retrieve() 함수는 아무 것도 수행하지 않습니다. Null도 입력 필드에 넣지 않습니다. 둘째, 음, 실제로 입력 값을 저장하려면 onSubmit() 기능을 원합니다.

이들은 두 가지 기능을합니다. 볼 수 있듯이 elements과 s_elements을 선언하고이를 검색하려고합니다. 그러나 아무 일도 일어나지 않는다!

이

<form name="forsendur"> 
    < ... bunch of input and select fields > 
    <input class="button2" type="submit" value="Calculate" onClick="onSubmit();"/> 

</form> 

이 retrieve() 호출하는 유일한 버튼입니다 :

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

편집 을 _ (검색) 함수는 이제 작동

function retrieve() { 
    if (typeof(Storage) != "undefined") { 
     var elements = document.getElementsByTagName('input'); 
     var s_elements = document.getElementsByTagName('select'); 
     for (var i=0; i<elements.length; i++) { 
      if (elements[i].getAttribute("type") != "submit" && elements[i].getAttribute("type") != "button") { 
       e = elements[i]; 
       e.setAttribute("value", localStorage[e.getAttribute("name")]); 
      } 
     } 
     for (var i=0; i<s_elements.length; i++) { 
      s_e = s_elements[i]; 
      s_e.setAttribute("value", localStorage[s_e.getAttribute("name")]); 
     } 
    } 
} 

function onSubmit() { 
    var elements = document.forms["forsendur"].getElementsByTagName("input"); 
    var s_elements = document.forms["forsendur"].getElementsByTagName("select"); 
    for (var i=0; i<elements.length; i++) { 
     if (elements[i].getAttribute("type") != "submit") { 
        e = elements[i]; 
        localStorage[e.getAttribute("name")] = e.getAttribute("value"); 
     } 
    } 
    for (var i=0; i<s_elements.length; i++) { 
       s_e = elements[i]; 
       localStorage[s_e.getAttribute("name")] = s_e.getAttribute("value"); 
    } 
} 

이

는 입력 값으로 형태이다 . 나는 많은 오탈자를 고쳤다. 이제는 하나의 문제 만 남아 있습니다.

Answer 1

문제의 요점은 당신이 당신의 입력 값을 얻을 수 HTML을 사용하는 대신 의 DOM 속성 특성을 시도하고 있다는 점이다.

<a href="http://example.com"></a>

DOM 속성은 다음과 같이 액세스 할 수 있습니다 :

document.querySelector('a').href = 'http://example.com'

HTML이 읽습니다 속성

HTML 속성이 같은 것입니다 yo의 html 텍스트를 구문 분석하여 브라우저 ur 사이트. 브라우저는 HTML 요소를 나타내는 DOM 개체을 만든 다음 이 유사한 방법으로 속성 설정 :

var a = document.createElement('a'); 
a.setAttribute('href', 'http://example.com') 

HTML이 속성에 해당하는 DOM 속성이 종종있다 - 등 .href 속성.

(당신이 그들에 액세스하는 방식 외에)이 두 가지의 차이는, HTML 페이지 후 대부분의 이벤트가 DOM 속성을 수정로드이다,하지 HTML은 속성 - 예를 들어, input에 입력 적절한 DOM 개체에 .value 속성을 변경합니다,하지만 HTML 속성 수정하지 않습니다 :

<input type="text" value="hello"/> - 당신이 명시 적으로 설정하지 않는 한,value이 "hello" 유지됩니다 HTML 속성을 .한편 입력 내용을 입력 할 때 DOM 속성 인.value은 입력 된 텍스트를 반영합니다.

localStorage[e.getAttribute("name")] = e.value; <에 HTML 속성value

를 사용하여 - -

는 라인 localStorage[e.getAttribute("name")] = e.getAttribute("value"); <을 변경하려는 것, 코드의 특정 예제를 제공하려면 DOM을 사용 속성.value