Different types of browser storage

Question

From this slideshow http://slides.html5rocks.com/#slide8 and from Chrome: View > Developer > Developer Tools > Storage tab,

I learned that there are at least 4 types of browser storage: Databases, Local Storage, Session Storage, Cookies (are there more?)

What are the differences? When should I use one over the other?

For example, if a site wants to store user preferences, which storage method should the site tell the browser to use?

Thanks!

Matt

Answer 1

They are all browser-side storage to provide offline/cache mechanisms to web apps/sites:

• local storage : simple key-value storage, the data is always stored as strings. The same data is accessible to all the pages of the domain and remains persistent even after you closed the browser.
• session storage : same but is local to one URL and to one browser session (deleted on browser close).
• SQL database (aka WebSQL): storage in a local DB you can access by SQL requests... seems already deprecated as IE and Firefox have stated they won't implement it.

Maybe you'll also hear soon about IndexedDB which is a kind of local/sessionStorage but which you can use to store javascripts objects instead of only strings.