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?

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

Answer 2

The thing you are asking is about the Web Storage which is basically an HTML Web Storage. Local Storage- Used as a volatile storage (has no expiry) Session Storage - Till a session is being used or a tab is open IndexedDb - Once used, you have to manually clear it (History or going in Storage) WebSQL - Old but still used the same SQL queries - It's not a part of HTML5 specification now. Cookies - Are the most common to save small about of data, They are used by all the website and these days they every website using it should ask for user permissions. That's GDPR BTW!