CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
evan
evan

Reputation: 964

Local-storage not showing variables until after page reload

See it live here: http://evanwknight.com/4240/#about. The variables go into local storage, but not until you click send message, then refresh the page.

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

Upvotes: 0

Views: 1209

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

It's not showing up till after the reload because you're only setting it after the form is submitted.

You would need to put

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

into the click event as well as after you set it.

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

Upvotes: 1

Related Questions