Augmented Client-side Storage with HTML5 in ASP.NET

If you are designing and developing a website using ASP.NET then this forms a pertinent question for you. How do you want to store application data on the client side? The optimal solution that any .NET development company would prefer is HTML5 Web Storage. Being a streamlined data storage mechanism, HTML5 stores data at the client’s end as key-value pairs.

At the server-end, data storage is never an issue with RDBMS solutions. Traditionally, dedicated .NET developers used to store data at the client’s end in the form of cookies. W3C provides 5MB per origin storage space for HTML5. Juxtapose this with the size for cookies (4MB), and the reason is evident why HTML5 Web Storage should be preferred. But, let’s not jump to conclusions as there always is a catch to every situation. Cookies are passed instantaneously between the client and server automatically, in sync with a website’s every request. Web Storage does not do this, and you need to establish a programmatic construct using methods like JQuery to call a Web Method or a WCF service. The data in the Web Storage cannot be cleared by setting an expiry, unlike Cookies. You again would need to adopt a programmatic approach for the same or use a browser-based UI dialog box for clearing the same.

You can implement Web Storage in two forms; session storage, which lasts as long as the current instance of the browser exists or local storage, where data persists across multiple sessions. These can be manipulated using the sessionStorage and localStorage attributes of the window object. Single transactions are where session storage is ideal as data ceases to persist as soon as the user shuts down the browser instance. In local storage, the data is trans-session persistent and therefore can be used for future access to the same website. Even closing the current browser instance does not remove the data. Below are some of the key-value pairs with almost identical properties and methods for session storage and local storage:

• setItem() – stores a key-value pair in the respective Web Storage object
• getItem() – retrieves value of a specified key from the respective Web Storage object
• removeItem() – removes a specified key-value pair from the Web Storage object under consideration
• clear() – removes all the key-value pairs from the Web Storage object
• key() – takes a 0 based index and returns key name at that index
• Length – returns the total number of key-value pairs present in the Web Storage object
• remainingSpace – returns the amount of storage space in bytes still available for storing data. This property is specific to IE. Other browsers may implement similar property.

You can now go ahead and implement one these methods for storing application data at the client’s end. At GoodCore, we are always on the hunt to redefine programming paradigms. Optimizing processes and developing new ways to reduce product development lifecycles is an inherent goal at GoodCore. Being an offshore software development company, we provide cost-effective offshore .NET development services that are world-class and are sure to help you conceive the web application of your dreams in reduced timeframes.