Client Side Persistence (Storage)

Question

In my demos, I'd like to avoid using traditional DBs and store all the data on the client side, e.g. information submitted via a form.

What alternatives do I have for that. I've heard about Gears but I don't have any practical experience.

Can I also store binary information besides strings, e.g. an image?

Capp

Answer 1

You may have a look on YUI's StorageUtility. It can use HTML 5, Google Gears or SWF on a fallback basis.

Markswoman

Wow, it uses SWF? That is terrible. This is the kind of thing that makes me just want to turn off flash storage on a per request basis. Total abuse, and sneaky. I find it disturbing that a brand like Yahoo, and open source software would resort to the kind of thing spam adware is known for. – Codfish

@apphacker: just because spammers use a technology for nefarious purposes doesn't mean that all uses of that technology are somehow evil. There's nothing wrong with using it for valid reasons. Or should we ban HTTP redirects because spammers use them to send people to evil sites? – Macrocosm

@apphacker I can't see the point. So do you hate HTML 5 or Google Gears? – Markswoman

@AndyLi I hate that flash storage doesn't get deleted when the user clears their cache. – Codfish

Answer 2

Your options are somewhat limited I'm afraid.

• Cookies
• Depending on your willingness to only use certain browsers you could implement browser based storage

Abysm

Answer 3

Cookies are the most supported way to go that will work across browsers. I have open sourced a small library for getting and saving data via Cookies via native javascript objects.

http://code.google.com/p/mapbug/source/browse/trunk/app/scripts/cookies.js

you're welcome to copy it and use as you see fit. You'll also need this javascript namespace isolation code if you use it as is:

http://code.google.com/p/mapbug/source/browse/trunk/app/scripts/namespace.js

If you have a large amount of data, you will have to distribute it amoung many different cookies. You can generally depend on being able to save up to 4K of data per cookie.

Golfer

Answer 4

The YUI StorageUtility is a nice abstraction, as Andy said. Dojo has a similar abstraction dojox.storage which works with some older browsers as well. If your amount of data is < 100 KB, then you can easily just use Flash. Think carefully about using HTTP cookies, as they are not only limited in size, they are sent over the wire, which may or may not be desirable.

Chiasma

Answer 5

I have a very simple demo for testing HTML5's webstorage / localstorage.

http://www.codebase.es/test/webstorage.html

You can store whatever you want, not only strings. To store an image, copy the image into a canvas and save the data using toDataURL() method.

But don't expect it to work on IE...

Photography