Storing data in web-browser

Among the HTML5 features, there are a few intended to store data on the client side: Web Storage, IndexedDB, and FileSystem API. We benefit from these technologies when the following happens:

• We want to cache client-side data to make them fetch-able without extra HTTP requests

• We have a significant amount of local data in the web application, and we want our application to work offline

Let's take a look at these technologies.

Web Storage API

In the past, we only had the mechanism to keep the application state, and it was using HTTP cookies. Besides unfriendly API, cookies have a few flaws. They generally have a maximum size of about 4 KB. So we simply cannot store any decent amount of data. Cookies don't really fit when the application state is being changed in different tabs. Cookies are vulnerable to Cross-Site Scripting attacks.

Now we have an advanced API called Web Storage. It provides greater storage capacity (5-25 MB depending on the browser) and doesn't attach...