Web Storage in HTML5


                In this blog I will explain Web Storage concept in HTML5. In traditional way if we want to store any data in client side we use cookies. Cookies are allow us stored the data in browser (client machine). It has some disadvantage. 

Disadvantages:
1.    Cookies can be disabled on user browsers
2.    Cookies are transmitted for each HTTP request/response causing overhead on bandwidth.
3.    No security for sensitive data
Cookies Limitation:
1.    Most browsers support cookies of up to 4096 bytes(4kbytes)
2.    Most browsers allow only 20 cookies per site; if you try to store more, the oldest cookies are discarded.
3.    Browser supports 300 cookies towards different websites.
4.    Complex type of data not allowed(eg: dataset), allows only plain text (ie, cookie allows only string content)
5.    Cookies are browser specific.

Web storage is web application software methods and protocols used for storing data in a web browser. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. There are two main web storage types  
1.     Local storage
2.    Session storage.
Web storage is being standardized by the World Wide Web Consortium (W3C). It was originally part of the HTML 5 specification, but is now in a separate specification. It is supported by Internet Explorer 8, Mozilla-based browsers (e.g., Firefox 2+, officially from 3.5), Safari 4, Google Chrome 4 (session Storage is from 5), and Opera 10.50

Advantage of Web Storage
                Web storage provide following futures.
1.    Storage Size

            Web storage give greatest storage capacity comparing to Cookies. For example
Sino
Browser
Support Version
Size
1
Chrome
4+
5Mb
2
Firefox
3.5+
5MB
3
IE
8+
25MB
4
Safari
4+

5
Opera
10.50+
10MB

2.    Client Side Interface
            Web storage offers two different storage areas, local storage and session storage which differ in scope and lifetime.
        Local storage is per origin (the combination of protocol, hostname, and port number). This data is available to all scripts loaded from pages from the same origin that previously stored the data) and persists after the browser is closed.
        Session storage is per-page-per-window and is limited to the lifetime of the window. Session storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other, a use case that's not well supported by cookies.

Usage of Web storage
                Now let see how to use local storage .If you want to set value to local storage use setItem function with key value parameter. Similarly if you want to get value from local storage use getItem function with key value parameter. Key is identifier and value stored values .

Note: key/value pairs are always stored as strings. Remember to convert them to another format when needed. The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter: 


<form>

<label id="lblClickCount">

</label>

<input type="button" onclick="setSettings()" value="Save" />

</form>

<script type="text/javascript">



    localStorage.setItem("clickcount", 0);

    function setSettings() {

        if (typeof (Storage) !== "undefined") {



            localStorage.setItem("clickcount", Number(localStorage.clickcount) + 1);

            $("label").html(localStorage.getItem("clickcount"));

        } else {

            alert("Sorry! No Web Storage support.")

        }

        return false;

    }

</script>

  
Similarly SessionStorage 



Now see how to save and retrieve data from web storage

<script type="text/javascript">

 var myObject = [];



var employeeObject1 = new Object();

employeeObject1.name = "John";

employeeObject1.age = 23;

myObject.push(employeeObject1);



var employeeObject2 = new Object();

employeeObject2.name = "Peter";

employeeObject2.age = 24;

myObject.push(employeeObject2);



var employeeObject3 = new Object();

employeeObject3.name = "Jack";

employeeObject3.age = 25;

myObject.push(employeeObject3);





    function setSettings() {

if (typeof (Storage) !== "undefined") {

//save complex data in local storage       

localStorage.setItem("employeelocal", JSON.stringify(myObject));

//save complex data in session storage      

 sessionStorage.setItem("employeelocal", JSON.stringify(myObject));





             

        }

else {

            alert("Sorry! No Web Storage support.")

        }

        return false;

    }

</script>



Now see how to retrieve complex data from web storage



<form>

<label id="lblClickCount">

</label>

<input type="button" onclick="setSettings()" value="Save" />

</form>

<script type="text/javascript">



    sessionStorage.setItem("clickcount", 0);

    function setSettings() {

        if (typeof (Storage) !== "undefined") {



          sessionStorage.setItem("clickcount", Number(sessionStorage.clickcount) + 1);

            $("label").html(sessionStorage.getItem("clickcount"));

        } else {

            alert("Sorry! No Web Storage support.")

        }

        return false;

    }

</script>

 


Now see how to save and retrieve data from web storage

<script type="text/javascript">  

    function getSettings() {

if (typeof (Storage) !== "undefined") {

//get complex data in local storage       

     var myObject = JSON.parse(localStorage.getItem("employeelocal "));



//save complex data in session storage      

var myObject = JSON.parse(sessionStorage.getItem("employeelocal "));

        }

else {

            alert("Sorry! No Web Storage support.")

        }

        return false;

    }

</script>


No comments:

Automatically load div using JQuery

             In this tutorial we are going to see how to automatically call the  MVC action method in certain time interval.First create an Controller and name it as "MyController"  and rewrite an Index method as following. and one more public method _Index

 namespace MyController.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; 
            return View();
        }
        public string  _Index(int? count)
        {
            count = count ?? 1;
            string str = string.Empty;
            if (count == 1)
                str = "It load at first time";
            else if (count == 2)
                str = "It load at secound time";
            else
                str = "It load at " + count + "th time";
            return str;
        }
    }
} 


     Right click the index method and and select Create view and rewrite the view with following
 

 <div id="dibAutocontent">
        @ViewBag.Message
</div>
<div id="divcontentloading">
      Request is send to Server 
</div> 

 now see how to load the div in page load and reload the div in every 5 min with out any user interaction using Jquery. for that u have to copy the following the following script and past it in view.
 <script type="text/javascript">
  (function ($) {
    $(document).ready(function () {
    $('#divcontentloading').hide();
    $.ajaxSetup(
    {
      cache: false,
       beforeSend: function () {
                $('#dibAutocontent').hide();
                $('#divcontentloading').show();
       },
       complete: function () {
                $('#divcontentloading').hide();
                $('#dibAutocontent').show();
       },
       success: function () {
                $('#divcontentloading').hide();
                $('#dibAutocontent').show();
      }
      });
     var $container = $("#dibAutocontent");
     var count = 1;
     var _url ='@Url.Action("_Index", "Home")?count=' + count
     $container.load(_url);
     setInterval(function () {
          count =  count + 1;
          $container.load(_url);
     }, 5000);
  });
})(jQuery);
</script>
No comments:
Subscribe to: Posts (Atom)