javascript - storing forms and their elements values in a variable -

i have single page web app.

for speed, store each 'page' in js.

i have problem happens when there form on page. if fill in form, , store in js variable, , retrieve it, forms values have disappeared?

i use functions like:

var pages_html = {};  var $page = $('#some-page'); store_page($page); $page.remove();  //some stuff on page  var $retrieved_page = get_page('some-page'); console.log($retrieved_page.find('#some-input').val()) //consoles log blank / ''  function store_page(page){     var page_id = $(page).attr('id');     pages_html[page_id] = $(page); }  function get_page(page_id){     var page = pages_html[page_id];     return $(page); } 

everything else seems work, can store , retrieve pages wish, values of form elements lost. how can work around this?

you cannot store that. instead store serialized array. can fill when needed. serializearray returns array of objects have name , value

var values = {}; function store_page(page){     var page_id = $(page).attr('id');     pages_html[page_id] = $(page);     values[page_id] = $(page).find("form").serializearray(); // serialize } function get_page(page_id){     var page = pages_html[page_id];     values[page_id].foreach(function(obj){         page.find('[name=' + obj.name + ']').val(obj.value) // add again     });     return page; // , return }