Web storage overview

On the Internet, information can be stored in two places: the web server and the web client (i.e., the visitor’s computer). Certain types of data are best stored in one of these places, and other types in the other.

The right place to store sensitive and important data would be the web server. For example, if you put any items in your shopping cart at an online store, your potential purchase data is stored on a web server. Only a few bytes of tracking data are stored on your computer, containing information about you (or, rather, your computer) so that the web server knows which shopping cart is yours. Even with the new features of HTML5 there is no need to change this system – it is reliable, secure and efficient.

But storing data on the server is not always the best approach, since sometimes it is easier to store secondary information on the user’s computer. For example, it makes sense to store user settings (say, parameters that determine how a web page is displayed) and application state (a snapshot of the current state of the web application) locally so that a visitor can continue running it from the same location later.

Before HTML5, the only way data was stored locally was through the cookie mechanism, which was originally designed to exchange small amounts of identifying information between web servers and browsers. Cookies are ideal for storing small amounts of data, but the JavaScript model for handling them is somewhat clumsy. The cookie system also forces the developer to fumble with expiration dates and futilely send data back and forth across the Internet with each page request.

HTML5 introduces a better alternative to cookies that allows information to be easily and easily stored on the visitor’s computer. This information can be stored on the client computer indefinitely, is not sent to a web server (unless the developer does it himself), can be large in size, and requires only a couple of simple, efficient JavaScript objects to work with.

This feature is called Web Storage and is particularly well suited for offline web applications because it allows you to create self-sufficient offline applications which can store all the information they need even when not connected to the Internet.

HTML5 web storage functionality allows a web page to store data on the visitor’s computer. This information can be short-term, which is deleted when the browser is turned off, or long-term, which remains available on subsequent visits to the web page.

The information stored in the web repository is not actually stored on the Internet, but on the computer of the visitor of the web page. In other words, web storage means storing data not on the Internet, but storing data from the Internet.

There are two types of web storage that are in one way or another related to the two objects:

LocalStorage.
Uses a localStorage object to store data for the entire web site on an ongoing basis. This means that if a web page stores data in local storage, that data will be available to the user when they return to that web page the next day, next week, or next year.

Of course, most browsers also give the user the ability to clear the local storage. In some browsers, it is implemented as an all-or-nothing strategy, and through it all local data is deleted, much in the same way that cookies are deleted. (In fact, in some browsers, cookies and local storage are interrelated, so the only way to delete local data is to delete cookies.) And other browsers may allow the user to view data for each individual Web site and delete data for the selected site or sites.

Session data storage
Uses a sessionStorage object to temporarily store data for a single browser window or tab. This data is available only until the user closes the window or tab, at which point the session ends and the data is deleted. But session data is retained if the user goes to another web site and then comes back, provided it happens in the same browser window.

In terms of web page code, both local storage and session data storage work exactly the same. The only difference is the duration of data storage.

Using the local repository provides the best opportunity to store the required information for subsequent visits to the web page by the user. The session repository is for storing data that needs to be forwarded from one page to the next. (The session repository can also store temporary data used only on one page, but regular JavaScript variables work fine for that).

Both the local repository and the session repository are linked to the domain of the website. Thus, if you save data to the local repository for the www.index.html page, this data will be available for the www./contact.html page, since both of these pages share the same domain. But this data will not be available for pages on other domains.

In addition, since the web storage is located on this user’s computer (or mobile device), it is linked to this computer, and a web page opened on this computer and storing data in its local storage has no access to the information it has stored on another computer. Similarly, a web page creates a separate local storage if you log in with a different user name or start a different browser.

Although the HTML5 specification does not set any strict rules about the maximum amount of storage, most browsers limit it to 5 MB. You can pack a lot of data into that size, but it won’t be enough if you want to use local storage to optimize performance and cache large images or videos in it (and truth be told, local storage is not designed for that purpose).

For large data storage, the still evolving IndexedDB database standard allows for much larger local storage – usually 50 Mbytes to start with, and more if the user agrees.