Displaying local storage variables without page refresh

Question

I'm able to pass the displayMessage variable, but the page reloads. I've been looking at ajax tutorials, but I'm not sure how to pass displayMessage without the page reloading.

I want to store more than one message on the phone. So if I send "help me stackoverflow," then "please," they both get stored. (right now "please" would replace "help me...").

// this is my form
<form role="form">
<div class="form-group">
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" id="submit" class="btn btn-default">Submit</button>
</form>


// this is where message displays
<span class="displayMessage"></span>


// this is my js
$(document).ready(function () {     
  $('#submit').click(function () {
      var displayMessage = $('#message').val();
      localStorage.displayMessage = displayMessage;
  });

});

  $(document).ready(function () {
  $('.displayMessage').html(localStorage.displayMessage);
})

What my screen looks like.

What @adeneo said is right, but to store all the messages - not only the last one - you can try [this solution](http://stackoverflow.com/a/3357615/1267304). — DontVoteMeDown, Dec 18 '13 at 17:56

Jan · Accepted Answer · 2013-12-18T19:32:44.937

2

The page reload is triggered by the default button click behaviour. You need to disable it by calling preventDefault on the event object:
```
$('#submit').click(function (e) {
    e.preventDefault();
    // your code
});
```

As DontVoteMeDown already said, you can store an object or array as JSON in the local storage. So you could do something like this:

$(document).ready(function () {     
    $('#submit').click(function (e) {
        e.preventDefault();

        var storedMessagesJSON = localStorage.displayMessages || '[]',
            storedMessages = JSON.parse(storedMessagesJSON),
            displayMessage = $('#message').val();

        storedMessages.push(displayMessage);
        localStorage.displayMessages = JSON.stringify(storedMessages);
    });

    var storedMessagesJSON = localStorage.displayMessages || '[]',
        storedMessages = JSON.parse(storedMessagesJSON);
    $('.displayMessage').html(storedMessages.join('<br>'));
});

I also made a JSFiddle.

edited Dec 18 '13 at 19:32

answered Dec 18 '13 at 19:25

Jan

1,394
10
12

Nice! thank you. Now I have two problems which I've made this fiddle for: http://jsfiddle.net/WqDJv/. The
tags push down the iphone, and the messages are all in the same css bubble, instead of creating a new one each time. And... the clear button doesn't work. – evan Dec 18 '13 at 20:20
The iPhone image is pushed down because it is below the messages. You can make the messages `position: absolute`, which will prevent them to incluence other content. I don't know why the click event of the clear button is not correctly fired. Nevertheless you should also use jQuery to bind the click event to the button. I updated [your fiddle](http://jsfiddle.net/WqDJv/1/). – Jan Dec 18 '13 at 22:29

Displaying local storage variables without page refresh

1 Answers1