Store and Retrieve Session Form Data - Best Method

RationalRabbit
RationalRabbit used Ask the Experts™
on
I have a setup I am re-writing that uses tabs for different functions. Two of those tabs are related forms that are submitted together. Another tab holds a table with pagination and column sorting. This creates a problem as every page change or change in sorting or row size in the paginated table requires a page refresh, which clears the forms. Ideally, I would just rewrite the table and use Ajax. The more expedient thing to do would be to just serialize the form on any form change, and refill the form from that serialized data if and when the user returns to the form in the same session.
$('#FormName').on('keyup change paste', 'input, select, textarea', function()
{
    // Do something here
}

Open in new window

What I am looking for:
1. I am not sure how best to store that serialized data (HTML5 local storage would be okay) or how best to refill the forms.
2. Perhaps there is a better way to do this altogether.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hummm - Thought this was a simple question.
Solved it this way.
var DataSaved = false;
function SaveData(i, s)
{
   // input, string
   localStorage.setItem(i, s);
   return true;
}
function LoadData(i)
{
   // i: index
   var d = localStorage.getItem(i);
   return JSON.parse(d);
}
function GatherData(f)
{
   var d = {};
   f.find("input, select, textarea").each(function(i, el)
   {
      var k = $(el).attr("id");
      var v = $(el).val();
      d[k] = v;
   });
   return d;
}
function RestoreData()
{
   console.log("Restoring");
   var fd = LoadData("fd");
   console.log(fd);
   $.each(fd, function(k, v)
   {
      $("#" + k).val(v);
   });
}
$('#TheForm').on('keyup change paste', 'input, select, textarea', function()
{
   if (Modernizr.localStorage)
   {
      var fd = JSON.stringify(GatherData($("#TheForm")));
      console.log("Saving", fd);
      DataSaved = SaveData("fd", fd);
   }
});

Open in new window

Author

Commented:
Actually, localStorage seems to be problematic, or there is something I do not understand about clearing the data.  I found that searching for information on the Web also turned out to be problematic.

Not shown in the code above is the code I added later to remove the data, which is also a necessary function.
So I have this:
function ClearFormData()
{
   // clear stored form data
   localStorage.removeItem('fd');
}

Open in new window

This will immediately clear the form when run, but will not remove the data. The next time the tab on the page is opened, the data has returned. Using localStorage.clear(), as I understand it, will remove all user storage, which may affect storage from other browser tabs the user may have open. There is also sessionStorage, but that does not seem to be much different in this matter.

My Next Solution
I am beginning to think that trying to handle this client-side is more headache than it is worth - at least, with my limited knowledge. The fact that there was no response to this question seems to bolster that. Perhaps the best thing to do is a combination of client and server side using AJAX - serialize the data and AJAX it into a server side script and store it in a session array.

I'm open to any suggestions.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial