HTML5 - SPLessons

HTML5 Web Storage

Chapter 17

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Web Storage

HTML5 Web Storage

shape Introduction

HTML5 Web Storage is a client side database. User can store the data in the form of key/value pairs. Following are the concepts covered in HTML5 Web Storage chapter.

  • What is Web Storage
  • Web storage vs Other Storage Devices
  • Browser Support
  • Access Methods

What is Web Storage

shape Description

Web storage is simple client side local storage which allows users to store the data in the form of key/value pairs. Cookies also store the data in the browsers but there are certain limitations as follows.

In order to write/retrieve the data into the local storage HTML5 have the simple APIs, and the data will not include with the HTTP request.10MB of data can be stored per each domain. Web storages are divided into two types  as follows.

The image below demonstrates the web storage.

Web storage vs Other Storage Devices

shape Description

Web storage vs Other Storage devices demonstrates the features of the web storage and comparing with the other storage devices as follows.

  • Web storage vs Cookies
    Cookies are having the less storage capacity when compared to the web storage.
    The HTTP request will sent by adding the cookies which may slow down the application performance.
  • Web storage vs Indexed DB
    Indexed database also a client side database which emerging the standards of HTML5. Comparing to the Indexed DB web storage is a much more simple API. Basically web storage store the data in the form of key/value pair there is no any querying language.
    Indexed data base is much more robust and more capability like a true database and still Indexed DB are developing.

Browser Support

shape Description

HTML5 Web Storage are supported by all the latest browsers.Following are the browser versions supported by HTML5.

Access Methods

shape Description

The HTML5 Web Storage access methods have different types web storages. Out of which only 2 types were taken into consideration as shown below with examples.

Local Storage

Local storage stores the data without any expire date. The data will available in multiple windows and user can able get the data even when the browser get closed or reopened and used to store users documents, mail boxes and many more. The code below demonstrates use of local storage variable and accessing every time when the window is opened.

<!DOCTYPE HTML>
<html>
   <body>
      <script type="text/javascript">
         if( localStorage.hits ){
            localStorage.hits = Number(localStorage.hits) +1;
         }
         
         else{
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>
   </body>
</html>

Result

Run the above code in preferred browser following output is obtained.

Session Storage

In session storage the data will be available only for one session. The data will be carried out to the multiple windows in same browser and data disappears once the browser gets closed. Persistent data will always be cleared. The code below demonstrates use of session storage variable as shown below.

<!DOCTYPE HTML>
<html>
   <body>
      <script type="text/javascript">
         if( sessionStorage.hits ){
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         }
         
         else{
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>
   </body>
</html>

Result

Run the above code in preferred browser following output is obtained.

Summary

shape Points

  • Web storage data will not available in different browsers.
  • Cookies have the less storage capacity.
  • Older versions of Internet explorer and IE7 does not support web storage.
  • Web storage have simple APIs to write/retrieve the data.