Home arrow HTML arrow Page 3 - HTML 5: What`s New

HTML 5: What`s New

Earlier we covered some of the new features of HTML 5, such as canvas, audio and video. In this article we'll cover many of the useful new elements that the specification brings to the table. Please remember, though, that HTML 5 is a work in progress, and not fully supported by many browsers yet.

Author Info:
By: Ayad Boudiab
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 27, 2010
  1. · HTML 5: What`s New
  2. · Other Markup Elements
  3. · HTML 5 Web Storage

print this article

HTML 5: What`s New - HTML 5 Web Storage
(Page 3 of 3 )

The web storage API makes it easy to store data across web requests. As you all know, HTTP is stateless. In other words, the next time the same user hits a page, it is still considered a new request.

Scripting languages add their own features to remember users and their data across requests. The feature that is mostly used is a cookie. A cookie is stored on a user's computer and sent back and forth in every request to be able to determine the identity of the user and specific information about him/her. In addition, a cookie is limited in size.

Now, HTML 5 adds its own support for the ability to remember a user's identification and information, but it uses a better approach. Using the web storage API, developers can store values in easily retrievable JavaScript objects that persist across page loads by using either sessionStorage or localStorage.   Stored data is not transmitted across the network, and is easily accessed on return visits to a page. In addition, large values can be persisted -- as large as a few megabytes.

Although there is wide support for web storage in almost all browsers, it is always important to check for this support before making any commitments. localStorage and sessionStorage are available in the window object, so checking for them is very simple. The following code creates a JavaScript function that tests for this support and writes a statement on the screen:

Setting and getting the values of a sessionStorage is straight forward. Once the value is set, it can survive page refreshes, and can be accessed from other pages as well. But keep in mind that, since we are talking about sessions, this value will be available as long as the user's session is available (the user did not close the browser and terminate the session). The following example shows how we can set and get the session value:

localStorage is similar in use to sessionStorage, but with localStorage, values persist beyond window and browser lifetimes. You can access the data the next month, or even the next year.


This article has been an introduction to HTML 5. We touched on some of the important features, but obviously we did not cover everything (it would take a book to do so). We talked about a canvas on which to do drawings, we discussed the new elements being added, and we touched on audio and video.

It is important to note, though, that HTML 5 is not standardized yet. It is still a work in progress. Some browsers, like Firefox and Opera, support most of the features, but other browsers are still behind. It comes as no surprise that, although some of the features are neat and interesting, it is not time yet to put them to work in your web applications, unless you are definitely sure that your users use a version of the browser that supports those features.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials