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

我能夠通過displayMessage變量，但頁面會重新加載。我一直在尋找ajax教程，但我不知道如何在沒有頁面重新加載的情況下傳遞displayMessage。在不刷新頁面的情況下顯示本地存儲變量

我想在手機上存儲多條消息。所以如果我發送「幫助我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); 
})

What my screen looks like.

來源

2013-12-18 evan

@adeneo說的是正確的，但要存儲所有消息 - 不僅是最後一個 - 你可以試試[此解決方案]（http://stackoverflow.com/a/3357615/1267304）。 – DontVoteMeDown

謝謝！ _also，我沒有看到@ adeneo的答案..._ – evan

他被刪除了。也許不是那麼對*哈哈 – DontVoteMeDown

的頁面重載被默認按鈕點擊行爲觸發。您需要通過事件對象調用preventDefault禁用它：
```
$('#submit').click(function (e) { 
    e.preventDefault(); 
    // your code 
}); 
```

正如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。

來源

2013-12-18 19:25:50 Jan

不錯！謝謝。現在我有兩個問題，我已經做了這個小提琴：http://jsfiddle.net/WqDJv/。
標籤壓下iphone，並且這些消息都在同一個css氣泡中，而不是每次都創建一個新的。而...清除按鈕不起作用。 – evan

iPhone圖片被推下，因爲它在消息下方。你可以使消息'位置：絕對'，這將阻止他們包括其他內容。我不知道爲什麼清除按鈕的點擊事件沒有正確觸發。儘管如此，你還應該使用jQuery將click事件綁定到按鈕。我更新了[你的小提琴]（http://jsfiddle.net/WqDJv/1/）。 – Jan

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

回答

相關問題