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

我能够通过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

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

回答

相关问题