datispars blog

Looking at HTML5 LocalStorage

Introduction
Ajax brings some kind of flexibility for web developers. Using Ajax developers are able to develop lazy routines much easier. Ajax libraries and API let the front-end events to fire their own server-side handlers on demand. This is a great facility because whatever you make a page lighter then you have a faster loading. In the opposite side your application will be lazy in sending responses to the user actions. Here is a trade-of and HTML5 has a proper solution for decreasing response time.

Local Storage
LocalStorage is part of HTML5 standard specification that becomes very useful for caching server-side information into the client machine. HTML5 storage stays on your computer and works even when you reopen the browser and go to the site that you stored its information before.
Actually it is a memory space provides by the browser that websites can use to persistent data that doesn’t need to be sent to the server at the moment. It also can be used for pre-buffering.
LocalStorages remembers all fields that you fetched from the server side database. LocalStorage also increase the amount of downloads of a partial network. Lack of some kind of wide caching system within a business application makes interactive applications slow.
There are plenty of requirements that LocalStorage will get them the proper answer such as buffering and off-line facility.
LocalStorage is a key/value storage. Moreover web browser and API vendors will have their specific implementations that provides such as api for accessing stored data by a semi SQL.

To finding out if your browse support HTML 5 run below just function:

function isMyBrowserSupportLocalStorage() {
  return  !(window['localStorage'] && ('localStorage' in window) == null);
}

Below javascript lines shows that how localStorage helps the developer for maintaining variables:

globalStorage[''].globalVariable= 'This means globalVariable to be used by anyone';
globalStorage['org'].foo1 = 'Accessible for *.org websites';
globalStorage['blog.datispars.com'].companyVar= 'This is a value that can be accessed by the company website';

Same-Origin Restriction
A LocalStorage is not pretty secure as server-side remote databases. Every application or user that who has access to the physical storage probably will access to your LoclalStorage. Moreover any web site can read and modify its own values within a database. Websites can not access other websites databases. This has been called a same-origin restriction.

Conclusion
JavaScript developers used to cache the application informations into memory using structure that they built by coding into the memory such as array, lists and formatted strings. Some 3rd party tools and API have been came to make client side storing easier and more effective such as SQLLite. Now in a big improvement HTML5 is the first version HTML standard that supports local storages within contract. After this developers will be able to provide faster and more reach applications.

Posted in JavaScript