Best way to store small UI user preferences in web app? [closed]

I have a web app I'm developing and quite like the idea that if the user makes changes to the view of the UI (eg. Lists open or closed, certain viewing preferences) those changes remain after they close the browser and visit the web app at a later date.

Possible options I can think of:

1. Store UI preferences JSON object in cookie.
2. Use HTML5 local storage (no experience of this)
3. Store in mySQL database (not keen on storing such trivial data in the DB)

Once stored I will retrieve these preferences when the user returns and set the UI as it was when they last left it.

Does anyone have any experience of this type of feature and can suggest the best method for UI state save and retrieval?

Solution 1:

If it's so small you should probably store the UI settings json object in your own database.

That will leave users with less problems at their end, like cache clearance and local storage unsupported browsers.

It will also make it possible for users to use the UI settings across different computers or browsers.

Solution 2:

Using HTML5 local storage is really easy:

localStorage.setItem('someName', 'savedData');

When you have to retrieve it later you just use:

var data = localStorage.getItem('someName');

Using HTML5 has some drawback too, I suggest you to definitely add support to older browsers via cookie etc. Then again if you wish to enable the user to have the same settings regardless of the location he logs in from, you have no other option than to use a database table.

Extra note: Beware that cookies are sent with each request to the server. If low bandwidth is important and there are numerous settings that are defined in a cookie, using a database table or local storage makes more sense.

Solution 3:

Do you want the look and field changes remembered across multiple machines? Are they critical or will they cause major user frustrations if they are forgotten (clear cookies)?

The answer to this question decides whether you store locally or on the server.

If this is not required then a cookie or local storage should be sufficient. HTML 5 local storage is not really prevalent (a little old question).

If you want to remember across machines, a database is the only option.

Solution 4:

I've done this kind of thing before using cookies. I'd never want to store this kind of stuff in a database, and since its not a hugely important feature caching issues or disabled cookies shouldn't really matter - some people won't benefit from it but the majority probably will. If you want the users state to persist over different computers though you'll have to do what bhagyas suggested and store it in the database.