Use web storage to add offline capabilities
HTML5, the new HTML standard, supports a wide array of new functions and layout techniques. It fully supports multimedia, CSS3, and drawing capabilities with canvas and Scalable Vector Graphics (SVG). HTML5 offers new semantic elements, and also provides a legitimate way to create HTML web applications using application cache, JavaScript workers, a new version of XMLHttpRequest, and something called web storage. This article discusses the power of web storage and why it’s a better storage method than cookies. Learn about the basic concepts, browser support, and the HTML5 web storage objects.
Overview
Cookies have been around since the beginning of JavaScript, so storing data on the web isn’t a new concept. However, web storage is a much more powerful version of data storage that offers more security, speed, and ease of use. You can also store large amounts of data offline with HTML5 web storage. The exact amount is based on the web browser, but it’s often between 5 and 10MB, which is a lot of storage for an HTML application. Another perk is that this data is not loaded with every server request. The only limitation is that you cannot share web storage between browsers; if you store data in Safari, that data is not accessible in Mozilla Firefox.
There are two types of web storage objects built in to HTML5:
- The
sessionStorageobject stores data for a single session. If the user closes the page or browser, the data is destroyed. - The
localStorageobject stores data with no expiration date. The data remains stored when the web page or browser is closed, depending on the storage amount set for the user’s browser.
Both storage objects have the same methods and properties. For consistency, this article uses the localStorage object throughout the examples.
In this article, learn about the power of web storage and why it is a better storage method than cookies. Explore the basic web storage concepts, HTML5 web storage methods, and browser support.
You can download the source code for the examples used in this article.
Read the original article at IBM Developerworks
