Explore HTML5 Local Storage

Storing Data in Client Machine

In the dynamic web we have to keep track of user information and we need to store some data in client machine either for browser session or persistent upto a period. There are many advantages on storing data like reducing server request, increase performance and totally working offline.

Cookies

This is the old method invented by Netscape in 1994 and later implemented by Microsoft. Initial start with Session ID of user required by server as it replace QueryString logic of passing SessionID. Whenever a http request is sent to server, the cookies applicable to domain is sent along with that. It restrict us to store limited data to avoid repeated send in url access. Most browsers restrict the cookie size of max 4KB and a max of 20 cookies per domain.

They are unencrypted and completly insecure without SSL. Hackers stole the cookies using cross-script techniques and DNS spoofing. Also cookies can be easily blocked in browser. Mostly cookies are plain strings that we have parse with our client library to read or write.

Hacked Storage

To get rid of limitation from cookies and to store more data, coders used some hacks like storing data in Window.name, Flash Local storage. Also to get rid of Cookies trip to every http call the assets like images, css and  js are loaded from different domain when compared to the main URL accessed.

Web SQL Database

This was the first attempt in HTML5 to bring relational storage and access using SQL in client browser. It was not fully supported and later dropped in 2010 by w3c.

HTML5 Web Storage

This API provides easy way to store key/pair values in simple manner. It has two objects

1. window.localStorage to store persistent data.
2. code.sessionStorage to store data upto current session.

The storage limit(5 MB) is far higher than cookies(4 KB) and mostly this information it not transported to server in every request.

to detect localStorage support

function localStorageSupported() {
  try {
   return "localStorage" in window && window["localStorage"] !== null;
  } catch (e) {
   return false;
  }
}

Data added to storage using the setItem() method. It takes a key and value as arguements. If the key already exists, it simply overwrites the value

localStorage.setItem("name", "John");
sessionStorage.setItem("token", 4534564);
sessionStorage.setItem("active", true);
localStorage["photo"]= 'images/users/345455656.jpg';
sessionStorage["info"]=JSON.stringify(object));

When the storage exceeds the limit, we got a “QUOTA_EXCEEDED_ERR” and we can catch the exception.

try {
 localStorage.setItem("name", "john");
} catch (e) {
 alert("Exceeded Storage Quota!");
}

Data can be read from storage using getItem() method. If the “key” does not exist it returns null.

var string = localStorage.getItem("name");
var number = sessionStorage.getItem("token");
var boolean = sessionStorage["active"];
var object = JSON.parse(sessionStorage["info"]);

Use Cases

We can store dynamic html or template in Local Storage and can retrieve without repeated steps in server.

We can store more amount of user’s information like image, name and address and even user specific javascript code.

We can cache data in a paginated list to speed up the navigation.

We can store form data temporarily for retrieving in return back due to error or a wizard like setup that requires a final submit.