Storing persistent data in browser

Question

For my web application, I need to store form inputs spanning across multiple pages, until I finally process/manipulate them to produce some results (its mostly formatting the data entered and presenting it in some layout). The options I think I have are -

1. Keep sending user's inputs to the server, store it there in some database, do the final manipulation there only, and show the result.

2. Store the inputs in browser's storage as the user fills the forms, and finally use this stored data to manipulate and show results.

I very much want to use the second method, and perhaps a possible way is using cookies, but I'm afraid I might just hit some upper limit of cookie data storage. I'm also open to understanding the merits of the first method, or any third method.

thanks.

Answer 1

Hitting the storage limit of the cookie could indicate you are trying to store too much on the client side. It might be prudent to store it serverside, in something like a session. The key to the session could then be stored in a cookie.

An alternative method is to not have the requests span multiple pages, and just store the data on the client side, not as a cookie, but as different form fields and/or text fields (they could be hidden). The merit of such a method is it doesnt hit the cookie limit as you have. It also makes your serverside code easier/cleaner, since it doesn't have to keep track of state (something you'd always have to do if spanning across pages, and thus the reason you are hitting the cookie limit in the first place).

Answer 2

Generally cookies have a max size of 4k so you could store quite a bit of data in there.

Be careful with validating all information that lives cookies - all the information resides on a client browser and can easily be manipulated by users of the site at any time.

You didn't say which platform you use. Spring Webflow does exactly the kind of form processing that you want: http://www.springsource.org/webflow

Even if you don't use Java you could use some of the principles.

Edit: One more drawback of big/complex persistent cookies is that you have to make sure that any new code you deploy is backwards compatible with all the cookies that are out in the wild.

Answer 3

I would suggest storing the data in a session variable until you get to the final step rather than a cookie. I think this would be safer for your data as the user does not have direct access to the data, so you can validate as you go.

Answer 4

Use webstorage (you can client-side store around 5MB of text or binary data)

Firefox demo: http://codebase.es/test/webstorage.html

DOM Storage is supported in these web browsers:

• Internet Explorer 8
• Firefox 2 for sessionStorage, 3.5 for localStorage
• Safari 4

Just google for sessionStorage and localStorage objects.

Also modern webkit browsers supports client-side sql.

Edit:
I'm not sure about what you want to do but using AJAX you can store everything in javascript variables and serverside databases or sessions are a good choice.

Answer 5

You could use a small Flash Movie to store some data via Flash's Shared Memory Api or have a look at Google Gears.
Maybe also consider, that every byte you store in the cookie have to be transmitted everytime you website makes a request to the server.