Local Storage Concept in ASP.Net

In HTML5, there is a new feture of Local Storage. By taking advantage of HTML5 Local Storage, we can dramatically improve the performance of our data-driven ASP.NET applications by caching data in the browser persistently. Actually Local Storage is not just like Cookies, but much better. Like Cookies, Local Storage is persistent. When we add something to browser Local Storage, it remains there when the user returns to the website later. Importantly, unlike the cookie storage limitation of 4KB, we can store up to 10 MB in HTML5 Local Storage. Because HTML5 Local Storage works with the latest versions of all modern browsers (IE, Firefox, Chrome and Safari) we can start using this feature in our web based applications. Also unlike Cookies, this Local Storage data does not to the server for every post-back of our application. For ing the Local Storage data into the server, we need to rovide some programming code to execute it. It means that sending data to the server is totally dependent on the developer or dependent on the system requirements.

The following are the main two processes to send data to the server from Local Storage.

1. Sending data in a hidden field during full post-back.
2. Sending data via Ajax Request.

But storing data in a hidden field is the old technique. Now a days, there are some more techniques to store data:

1. Comma Separated Values (CSV)
2. JSON object serialized as a string

In which format we want to store data is totally our choice since it will be our custom code that will read the data and send it to the server. Since JSON is quite a popular format in web applications and also supported by all modern browsers, storing data as a JSON string is a nice option. Another advantage of using JSON is that there are sophisticated libraries such as Json.NET to read this JSON data in the server-side code and map it into a .NET object.

For implementing Local Storage, we need to design a page that contains 2 text boxes and 2 buttons as below:

<div>
   <table>
      <tr>
         <td>Customer Name </td>
         <td><input type=”text” name=”txtCustomer” id=”txtCustomer”/></td>
      </tr>
      <tr>
         <td>Customer Address </td>
         <td><input type=”text” name=”txtCustAddr” id=” txtCustAddr”/></td>
      </tr>
      <tr>
         <td><input type=”button” id=”btnSave”  value=”Save to Local Storage” onClick=”fnSaveData()” /> </td>
         <td><input type=”button” id=”btnFind” value=”Get Data From Local Storage” onClick=”fnGetData()” /> </td>
      </tr>
   </table>
</div>

The Script methods are as below:

function fnSaveData(){
    window.localStorage.setItem(“CustName”,document.getElementById(“txtCustomer”).value);
    window.localStorage.setItem(“CustAddr”,document.getElementById(“txtCustAddr”).value);

}

Notice that with the simple window.localStorage.setItem, we can store a key/value pair.

Now the following is the code for getting data from Local Storage:

function fnGetData ()   {
    alert(window.localStorage.getItem(“CustName”));
    alert(window.localStorage.getItem(“CustAddr”));
}

If we store the JSON formatted data into Local Storage and then try to retrieve it then we can use:

alert(JSON.parse(window.localStorage.getItem(“CustName”)));