2014-01-03 4 views
-1

form 입력에서 localStorage에 데이터를 성공적으로 저장하고 form 입력으로 표시 할 수 있습니다. 그러나 새로운 쿼리를 입력하고 submit 버튼을 누를 때마다 이전 검색없이 업데이트 된 값이 표시됩니다. 이전 검색을 모두 표시하고 값을 저장하면 페이지를 새로 고친 후에도 검색 쿼리가 저장됩니다. 일부 배열에 저장해야합니까 아니면 localStorage에 다른 방법이 있습니까? 내 코드 :localStorage가 예상대로 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function clickCounter() 
    { 
    if(typeof(Storage)!=="undefined") 
    { 
     localStorage.formInput = document.getElementById('theInput').value; 
     document.getElementById('newText').innerHTML = localStorage.formInput; 
    } 
    else 
    { 
    document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; 
    } 
} 
</script> 
</head> 
<body> 
<input type='text' id='theInput' value='Write here' /> 
<input type='button' onclick='clickCounter()' value='See what you wrote'/> 
<div id="result"></div> 
    <p>You wrote: <span id='newText'></span> </p> 
</body> 
</html> 
+1

어떻게 로컬 저장소에 항목을 저장하나요? * 당신은 무엇을 저장합니까? 코드가 정확히 어떻게 작동 할 것으로 기대합니까? – Pointy

+0

if (typeof (Storage)! == "undefined") if (Storage) – bjb568

+0

@Pointy 내 질문이 꽤 분명하고 질문의 대답이있다. – user227666

답변

3

올바르게 정보를 localStorage에 저장하려면 키를 할당해야합니다. 당신이하고있는 일은 Javascript의 메모리에 값을 저장하는 것입니다. 이는 페이지 새로 고침 전체에서 지속되지 않습니다. clickCounter()가 실행될 때 페이지는 locaStorage 키의 값만 가져옵니다. 페이지로드시 함수를 초기화하지 않으면 페이지로드시 apge에 배치되지 않습니다.

당신이 뭔가를 할 싶어 :

function clickCounter() 
    { 
    if(typeof(Storage)!=="undefined") 
    { 
     localStorage.formInput = document.getElementById('theInput').value; 
     document.getElementById('newText').innerHTML = localStorage.formInput; 
    } 
    else 
    { 
    document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; 
    } 
} 

는 로컬 스토리지가 다른 장치와 브라우저에서 다르게 구현됩니다 유의하시기 바랍니다. 모질라 (Modernizr)에서 피처 감지를 조사 할 수도 있습니다. 사용자가 쿠키를 지우면 localStorage도 지워지는 일부 브라우저 (Chrome)에서주의해야합니다.

http://modernizr.com/

+0

코드를 수정할 때 아무 것도 바뀌지 않았습니다 – user227666

+0

저장 용량이란 무엇입니까? 내가 제안한대로 모더니져를 통합 했니? 내 직감은 Storage가 정의되지 않은 변수이고 localStorage 캐시가 아니라는 것입니다. – Xenology

관련 문제