сообщение и получить данные из формы с помощью LocalStorage

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> 

Как создать и опубликовать данные из формы в Div с помощью LocalStorage?

И данные также должны оставаться там после того, как пользователь обновит страницу, проверив localstorage.

Это что-то вроде локального комментария на стороне клиента.

Answer 1

Прежде всего, вам нужно получать данные из вашей формы. Я советую вам изменить ваши материалы, чтобы иметь уникальные идентификаторы и классы для облегчения доступа:

<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');