Different types of browser storage
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?
Answer
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 (now supported on IE 10, FF, and Chrome) which is a kind of local/sessionStorage but which you can use to store javascripts objects instead of only strings.