在不刷新頁面的情況下顯示本地存儲變量

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 。