本地存储在页面重新加载之前不显示变量

Question

在此处观看：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

直到重新加载后才会显示，因为您只是在提交表单后才设置它。

你需要把

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

进入click事件以及设置后。

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