로그인하지 않고 사용자의 양식 입력 기억하기

Question

방문자가 특정 주제에 투표 할 수있는 간단한 사이트를 만들었습니다. 그것은 하나의 질문으로 구성되어 있으며 세 가지 선택 :

<template name="addVote"> 
    <div class="form-row choices"> 
     <label><input type="radio" name="vote" value="Yes"><i></i><span>Yes</span></label> 
     <label><input type="radio" name="vote" value="No"><i></i><span>No</span></label> 
     <label><input type="radio" name="vote" value="Undecided"><i></i><span>I’m Undecided</span></label> 
    </div> 
    <div class="form-row"> 
     <button class="button-submit">Submit and view results</button> 
    </div> 
</template> 

내가 로컬 스토리지뿐만 아니라 완벽하게 작동하는 DB에서 양식 값을 저장하기 위해 Session Amplify 패키지를 사용하고 있습니다.

var vote = $('[name="vote"]:checked').val(); 
Meteor.call("addVote", vote, function(error, voteId) { 
    SessionAmplify.set('vote', vote); 
}); 

방문자가 투표를 기록한 후에는 투표 결과가 바코드로 표시됩니다. 그들은 투표 한 후에 만 ​​결과를 볼 수 있습니다.

내가해야 할 일은 사용자가 사이트를 다시 방문 할 때 사용자의 투표를 기억하여 투표를 거치지 않고 곧바로 결과에 도달 할 수 있도록하는 것입니다. 모두 계정을 만들거나 로그인하지 않아도됩니다. 이미 저장하고 있습니다. localstorage에서의 응답은 간단히 SessionAmplify.get('vote')을 실행하여 액세스 할 수 있습니다.

이 저장된 값을 사용하여 양식을 미리 채우고 결과를 표시하려면 어떻게해야합니까?

Answer 1

if (localStorage.vote) { 
     //user has already cast a vote, reflect this 
     document.querySelector(".form-row").querySelector("input[value='"+localStorage.vote+"']").setAttribute("checked", true); 
     //disable the submit 
     document.querySelector(".button-submit").setAttribute("disabled", true); 
    } 

    function setLocalStorageVote() 
    { 
     //call when user has cast the vote. 
     localStorage.vote = document.querySelector(".form-row").querySelector("input[type='radio']:checked").value; 
    } 


document.querySelector(".button-submit").onclick = setLocalStorageVote; //using onclick here just for demonstrating purposes. Use addEventListener in production code! 

<template name="addVote"> 
    <div class="form-row choices"> 
     <label><input type="radio" name="vote" value="Yes"><i></i><span>Yes</span></label> 
     <label><input type="radio" name="vote" value="No"><i></i><span>No</span></label> 
     <label><input type="radio" name="vote" value="Undecided"><i></i><span>I’m Undecided</span></label> 
    </div> 
    <div class="form-row"> 
     <button class="button-submit">Submit and view results</button> 
    </div> 
</template> 

그것을해야한다. 부울을 저장하고 localStorage.vote의 값에 따라 결과를 얻으려면 코드를 무시하십시오. localStorage은 투표가 수행 된 클라이언트에서 무기한 설정됩니다. 바이올로에서 사용할 수 없으므로 유성 코드를 삭제했습니다. 이는 localStorage가 작동 함을 보여주기위한 것입니다.

http://jsfiddle.net/8fzur0h9/1/