Using html5 localstorage to retrieve data from server, to allow editing of and appending to data source, then saving back to server.

Question

So, I'm creating a standard user-data collection form that will be used by standard web browsers, as well as the iPhone and iPad. The app will allow users to create new records, as well as edit and delete existing records.

I've gotten the gist of using html5's 'localstorage' to create a client-side data source and am looking for direction for getting existing data from a server into a client-side data source, and then being able to edit or delete that data, or to append a new record to the existing data. Finally, being able to save the updated data back to the server.

It sounds like a lot, I know. But I've been pouring through html5 tuts and can't seem to find exactly what I'm looking for.

Answer 1

As you've already decided to use HTML 5's localStorage, you'll be using JavaScript anyway. In that case, I think you should use XMLHttpRequests to retrieve from and send data back to the server. There exist several nice introductions to this on the net, like the W3C Working Draft and on Apple's site, on MDC and on MSDN. Please search for questions containing the AJAX tag.

BTW, if you merely want to store data during page sessions (so, you don't have to store data locally in between several page visits), you can also store your data in JavaScript arrays/objects. They are very easy to access and manipulate. This approach also has the benefit of better browser support (contrary to HTML 5's localStorage and proprietary solutions).