페이지가 다시로드 될 때까지 로컬 저장소에 변수가 표시되지 않습니다.

Question

live here : http://evanwknight.com/4240/#about을 참조하십시오. 변수는 로컬 저장소에 저장되지만 메시지 보내기를 클릭 한 다음 페이지를 새로 고칠 때까지 표시되지 않습니다.

 <form id="form-one" name="form-one"> 
     <div class="form-group-one"> 
     <textarea class="names" id="message" rows="1">Hey Evan! ;)</textarea> 
     </div><br> 
     <button class="btn btn-success" id="submit" type="submit">Send Message</button> 
     </form> 


     // where the variables show 
     <div class="messages" id="onee"> 
     <span class="bubble you" id="displayMessage"></span> 
     <div id="myMessage"> 
     <span class="MYbubble me">Hey there! &nbsp; <img src="img/battery.png" width="15px"></span> 
     </div> 

     // js 
     <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.messages').hide();  
    $('#submit').click(function (e) { 
     e.preventDefault(); 
     $('#onee').show(); 
     $('#myMessage').fadeIn(2000); 
     $('#form-one').hide(); 
     $('#form-two').show(); 
     var displayMessage = $('#message').val(); 
     localStorage.displayMessage = displayMessage; 
}); 

    $('#displayMessage').html(localStorage.displayMessage); 
}); 

    </script> 

Answer 1

양식을 제출 한 후에 만 ​​설정하기 때문에 다시로드 할 때까지 표시되지 않습니다.

당신은 당신이 그것을 설정 한 후뿐만 아니라 click 이벤트에

$('#displayMessage').html(localStorage.displayMessage); 

을 넣어해야합니다.

... 
    localStorage.displayMessage = displayMessage; 
    $('#displayMessage').html(localStorage.displayMessage); 
}); 
$('#displayMessage').html(localStorage.displayMessage);