在不刷新页面的情况下显示本地存储变量

Question

1. 我能够传递 displayMessage 变量，但页面会重新加载。我一直在看 ajax 教程，但我不确定如何在不重新加载页面的情况下传递 displayMessage。

2. 我想在手机上存储多条消息。因此，如果我发送“帮助我 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。