2012-07-26 5 views
2

내 응용 프로그램에서 사용할 수 있는지 localStorage를 테스트하고 있지만 텍스트 입력 상자의 데이터를 저장하려고하면 화면이 비어있게됩니다. 이 문제를 어떻게 해결할 수 있습니까?localStorage 화면을 지움

<html> 
<head> 
<script type="text/javascript"> 
function write() { 
localStorage.setItem('item', document.getElementById('input').value); 
} 

function read() { 
var data = localStorage.getItem('item'); 
document.getElementById('display').innerHTML = data; 
} 
</script> 
</head> 
<body> 
<input id="input" type="text" /> 
<button type="button" onclick="write()"> 
Write 
</button> 
<p id="display"> 
Display 
</p> 
<button type="button" onclick="read()"> 
Read 
</button> 
</body> 
</html> 
+0

어떤 브라우저 (버전 포함)를 테스트 중입니까? –

+0

Chrome의 최신 버전에서 테스트 해 보았습니다. – Alwaysdeadfred

답변

2

전역 (document) 네임 스페이스에 write라는 함수를 사용하여 ... 다른 뭔가를 호출 할 수 있고 잘

<input id="input" type="text" /> 
<button type="button" onclick="somethingelse();"> 
Write 
</button> 
<p id="display1"> 
Display 
</p> 
<button type="button" onclick="read()"> 
Read 
</button>​ 

function somethingelse() { 
    localStorage.setItem('item', document.getElementById('input').value); 
} 

function read() { 
    var data = localStorage.getItem('item'); 
    document.getElementById('display1').innerHTML = data; 
}​ 

Working example here

+1

징크스! 넌 나에게 소다 빚 졌어. – jbabey

+0

@bbabey :-) * 가장 오래된 *로 정렬하는 경우 먼저 (그냥) :-) – ManseUK

+0

감사합니다. – Alwaysdeadfred

3

변화를 작동 : 여기에 코드입니다 귀하의 함수 이름은 write에서 다른 것입니다. 실수로 전체 페이지를 비우는 것처럼 document.write을 부르는 것 같습니다.

with(document) { 
    with(this) { 
     write(); 
    } 
} 

그래서 당신이 write은 그림자입니다 (이 document.write를 호출) : HTML 이벤트 핸들러 내부

+0

+1 정확히 내가 생각했던 것 !!!! – ManseUK

1

코드는 효과적으로처럼 실행됩니다. 당신은 단순히 window.write()와 올바른 기록을 참조 할 수 있습니다 :

<button type="button" onclick="window.write()"> 

궁극적으로는 모든 인라인 HTML 이벤트를 사용하지 않는 것이 좋습니다. 간단한 button.onclick = write이 효과가있었습니다. 여기서 button은 요소를 나타냅니다.

+0

+1 이벤트 핸들러가 실행되는 방식에 대한 좋은 설명 – ManseUK

+0

@ManseUK는 실제로 onclick = "blaa;"와 같은 html 이벤트 핸들러를 의미하지만 실제 이벤트 핸들러는 아닙니다. – Esailija

+0

HTML 이벤트 핸들러를 결코 사용하지 않습니다. - 'attachEvent' /'addEventListener'를 사용하여 첨부하거나 프레임 워크를 사용하십시오. – ManseUK