Локальное хранилище не показывает переменные до перезагрузки страницы

Question

Локальное хранилище не показывает переменные до перезагрузки страницы

0

Смотрите здесь: 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>

evan 19 дек. 2013, в 03:58

Источник

Теги:

javascript

jquery

html

html5

local-storage

1 ответ

Ещё вопросы

Bill Criswell · Accepted Answer · 2013-12-19T01-48-00.000Z

Он не появляется до перезагрузки, потому что вы устанавливаете его только после отправки формы.

Вам нужно будет положить

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

в событие click а также после его установки.

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