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?

Answer 1

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...

Answer 2

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

Answer 3

Your options are somewhat limited I'm afraid.

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

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.

Answer 5

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.