Store huge data to client side

Some times cookies or querystring or smiler ways are not suitable to store large amounts of data, the reasons are many and complex; as Microsoft article Cookies are limited;

1. 300 cookies
2. 4096 bytes per cookie (as measured by the size of the characters that comprise the cookie non-terminal in the syntax description of the Set-Cookie header)
3. 20 cookies per unique host or domain name

NOTE: Limitation depends on browser's platform!

Secondly if you want to pass data in query string (or similar) your page or server may cause HTTP 400 - Bad Request (Request Header too long)" error, there are 2 main reasons;

1. This issue may occur when the user is a member of many Active Directory user groups. When a user is a member of a large number of active directory groups the Kerberos authentication token for the user increases in size. The HTTP request that the user sends to the IIS server contains the Kerberos token in the WWW-Authenticate header, and the header size increases as the number of groups goes up. If the HTTP header or packet size increases past the limits configured in IIS, IIS may reject the request and send this error as the response. (Reference: Microsoft)
2. When exeeds the limit of header i.e. 4kb or 8kb.

If you used above procedure to pass data over HTTP, it might be slow down the page because they are passed on by every request to the server (even without call), while the jStorage or localStorage, data is NOT passed on by every server request, but used ONLY when called!

HTML5 Storage offers two new objects for storing data on the client:

1. localStorage - stores data forever
2. sessionStorage - stores data for one session

The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.

if (localStorage.varname){      
   document.write(localStorage.varname); }
else {
   localStorage.varname = "data stored on client side";
}

The localStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

if (sessionStorage.varname){    
   document.write(sessionStorage.varname); }
else {
   sessionStorage.varname = "data stored on client side";
}

localStorage.varname = "bar", data assignment.

localStorage.setItem("varname", "bar"), also assigns data.

localStorage.varname, fetch the data by giving key name i.e. varname, will return "bar".

localStorage.getItem("varname"), do the same, fetches the data.

localStorage.length, will return 1.

localStorage[0], will return "bar"

localStorage.key(0), will return "bar"

localStorage["varname"], will return "bar"

delete localStorage["varname"], will delete the key name "varname" and its data

localStorage.removeItem("varname"), same as above

localStorage.length,

localStorage.not_set, will return null

localStorage.clear(), will return null

jStorage can also be use for client side data store. jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Additional information can be found here