郵政和使用本地存儲

Question

我有一個簡單的表格和DIV

<form action="" method="post"> 
    <input name="username"> 
    <textarea name="msg" rows="10"></textarea> 
    <input type="submit" name="ok" value="Send" > 
</form> 
<div id="comments"></div> 

如何創建形式和獲取數據後會使用localStorage來的div得到表單數據？

在用戶通過檢查localstorage來刷新頁面後，數據也必須保留在那裏。

這就像本地發佈的評論在客戶端。

Answer 1

首先，你需要獲取數據從你的形式。我建議你修改你的輸入有唯一的ID或類更容易獲得：

<form action="" method="post"> 
    <input id="username" name="username"> 
    <textarea id="msg" name="msg" rows="10"></textarea> 
    <input type="submit" name="ok" value="Send" > 
</form> 
<div id="comments"></div> 

我假設你正在使用jQuery，因爲它是在你的標籤，這樣你就可以用jQuery像這樣得到的數據：

var username = $('#username').val(); 
var message = $('#msg').val(); 

然後你需要將它保存到本地存儲。既然你說，這將是類似的意見，我猜想會有很多人，所以你需要使用數組：

localStorage.comments = localStorage.comments || []; 
localStorage.comments.push({ 
    username: username, 
    message: message 
}); 

就是這樣！然後您可以使用localStorage.comments從任何地方訪問它。本地存儲位於全局window對象上，因此您無需執行任何特殊操作即可訪問它，您只需讀取它並從任何地方寫入即可。

你可以看到更多關於如何使用localStorage here和here的例子。

Answer 2

然後，你需要的是一個會話存儲，

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

此博客可以幫助您

http://www.thomashardy.me.uk/using-html5-localstorage-on-a-form

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 

// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key');