显示本地存储变量而不刷新页面

Question

1. 我可以传递displayMessage变量，但页面会重新加载。我一直在看ajax教程，但我不知道如何在没有页面重新加载的情况下传递displayMessage。

2. 我想在手机上存储多条消息。因此，如果我发送“help me stackoverflow”，然后“请”，它们都会被存储。 （现在“请”将取代“帮助我......”）。

   // 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);
   })
   

Answer 1

1. 页面重新加载由默认按钮单击行为触发。您需要通过调用事件对象上的preventDefault来禁用它：

   $('#submit').click(function (e) {
       e.preventDefault();
       // your code
   });
   

2. 正如DontVoteMeDown已经说过的那样，您可以将对象或数组作为JSON存储在本地存储中。所以你可以这样做：

   $(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>'));
   });
   

   我还制作了JSFiddle。