Did you find this useful?
Socialize it today.


HTML5 Web Storage

Wednesday, November 07, 2012

Persistent storage of data is one of the areas that web developers are generally concerned with when developing web applications that deal with user data. Unlike traditional desktop-client applications where there are many options for storing data such as the registry, local file system, database, as well as others, web applications are more limited as to saving user data during and after the user session. One common approach that web developers implement is the use of cookies. They use of cookies has been around for quite some time now and they can be used for persistent local storage of small amounts of data. However, they are not as efficient as they could be. Cookies can slow down a web application since they are included with every HTTP request. Also, unless you are securing the transmission between the server and the user, the data is unencrypted. Cookies are also limited in the amount of data that can be stored.

HTML5 Web Storage

HTML5 Web Storage, also known as "Local Storage", or "DOM Storage", brings us additional options with regard to storing data locally within the client web browser. within the user's browser. Web Storage is more secure and faster than traditional cookies. Unlike cookies, the data is not included with every HTTP request. Web Storage is only used when specified. Web Storage also allows for large amounts of data to be stored, without affecting the user experience. The web storage data is stored in key/value pairs, and a web page can only access data stored by itself.


Support for Web Storage

Not all browsers support HTML5 Web Storage. However, many of the browsers that are in use today do provide native support. Web storage is supported by Internet Explorer 8+, Firefox, Opera, Chrome, and Safari. Earlier versions of Internet Explorer, do not support web storage.


Types of Web Storage

There are two new objects for storing data on the client.

  • localStorage - stores data with no expiration date
  • sessionStorage - stores data for one session

Since not all browsers support Web Stroage, you should check for browser support for localStorage and sessionStorage before attempting to use it. You can use JavaScript to check for support. You should note that key/value pairs are stored as strings. Convert the strings to another format when needed, such as when using the data as numbers.


 <script>
 if(typeof(Storage)!=="undefined")
  {
  // localStorage and sessionStorage is supported.
  }
else
  {
  // No support for localStorage and sessionStorage.
  }
</script>


localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed.


<div id="userid"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.userid="jsmith";
  document.getElementById("userid").innerHTML="User ID: " + localStorage.userid;
  }
else
  {
  document.getElementById("result").innerHTML="Your browser does not support web storage.";
  }
</script>


sessionStorage Object

The sessionStorage object is implemented in the same manner as the localStorage object. However, the difference is that the data for only stored for that current session. The data is deleted when the user closes the browser window.


<div id="userid"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  sessionStorage.userid="jsmith";
  document.getElementById("userid").innerHTML="User ID: " + localStorage.userid;
  }
else
  {
  document.getElementById("result").innerHTML="Your browser does not support web storage.";
  }
</script>




Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML5: The Missing Manual Murachs HTML5 and CSS3 Head First HTML5 Programming: Building Web Apps with JavaScript