Web Storage

Web applications can store and retrieve data to track the user's preferences, record application settings or keep subsidiary resources on the client side. A client offline storage is a data management solution implemented according to one of the following models:

• Web Storage - a key/value store model based on string mappings;
• Web SQL Database - an SQL database implementation; this is a full-featured relational DB system; however, it is considered deprecated and is not supported in Internet Explorer and Firefox;
• Indexed Database - a database system for storing complex objects; the IndexedDB supports records indexing and cursor operations;
• File API - a number of interfaces allowing the developer to create file system hierarchies.

HTML5 Web Storage

Web Storage is a simple data management system keeping its data items as random-access records. It can be considered a "client-side NoSQL" solution. The storage provides four types of logical operations: placing an item locally as a key/value mapping; getting a value by looking up its key; changing an item's value; deleting an item from the storage.

The storage interfaces are exposed as part of local storage or session storage: the latter is limited to the lifetime of the current browsing context. In both cases the storage functionality is obtained through the use of the global window attributes:

console.log(localStorage.length); // window.localStorage

Here's an example of placing three data records in the local storage. The code snippet sets song titles as keys and names of artists as values:

localStorage.setItem("Justify My Love", "Madonna");
localStorage.setItem("Bohemian Rhapsody", "Freddie Mercury");
localStorage.setItem("I Got Stung", "Elvis Presley");

The same operations can be performed in a dictionary-like notation:

localStorage["You'll See"]="Madonna";
localStorage["I Want To Break Free"]="Freddie Mercury";
localStorage["Love Me Tender"]="Elvis Presley";

As a dictionary is an unordered set of key/value pairs, obtaining a value requires the knowledge of its corresponding key:

console.log("'Justify My Love' was performed by "+localStorage.getItem("Justify My Love"));
console.log("'Love Me Tender' was performed by "+localStorage["Love Me Tender"]);

Calling the removeItem() method deletes data items:

localStorage.removeItem("I Got Stung");

To control the size of the storage and number of its items, two properties can be used: these are remainingSpace and length. The remainingSpace property is implemented in Internet Explorer and has a default value of 5000000 bytes. The length of the storage reflects the amount of the data items:

console.log(localStorage.length); // returns 5 as one of the items was removed

Getting keys is performed with the help of the key() method; the method accepts a key index as its only argument:

for(var i=0; i<localStorage.length; i++) {
 var song=localStorage.key(i);
 var singer=localStorage.getItem(song);
 console.log(song+" was performed by "+singer);
}

To empty the storage completely, the clear() method is invoked:

localStorage.clear();
console.log(localStorage.length); // length is 0

The same set of methods and properties is available for the session storage:

console.log(sessionStorage.length); // window.sessionStorage