Javascript 本地存储在页面重新加载后才显示变量

请在这里观看直播：。变量进入本地存储，但直到您单击“发送消息”，然后刷新页面

      <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>

嘿，埃文！；）


发送消息
//变量显示在哪里
嘿！
//js
$（文档）.ready（函数（）{
$（'.messages'）.hide（）；
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
$（'one'）.show（）；
$（#myMessage'）。fadeIn（2000年）；
$（'形式一'）.hide（）；
$（'形式二'）.show（）；
var displayMessage=$（'#message'）.val（）；
localStorage.displayMessage=displayMessage；
});
$（'#displayMessage'）.html（localStorage.displayMessage）；
});

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

你需要把

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

在

事件中以及设置后，单击
事件

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