1. Technology

What is Local Storage and the localstorage Attribute in HTML 5?

By

Question: What is Local Storage and the localstorage Attribute in HTML 5?

The ability to store information on the hard drive of a customer is a critical difference between web applications and computer applications. But HTML 5 has a feature that is supported even in IE 8 that allows web developers to store data locally without using cookies.

Answer: What is Local Storage and the localstorage Attribute in HTML 5?

Local storage is one of the ways that applications that run on the computer directly have always been better than web applications (running in a web browser). The operating system on the computer provides tools directly to the applications for storing and retrieving data for the application. This information can be stored in .INI files, preference files, XML files, and many other places depending upon your operating system and the application you're using.

But web applications don't have this type of storage. The closest thing we have to a local storage tool is a cookie. Using a cookie, web developers can store a small amount of information (typically no more than 4 KB, see my FAQ: How Big Can an HTTP Cookie Be?) for retrieval later. But there are drawbacks to cookies that make them unattractive for most local storage needs:

  • Many people don't trust cookies, and leave them turned off or very restricted.
  • Cookies are delivered with every request, which can slow down the delivery of your web pages.
  • Cookies are unencrypted (unless your whole site is delivered over SSL) and thus insecure
  • Cookies are small (no more than around 4KB as I mention above) which doesn't give you a lot of room

Beyond cookies, the only way to get local storage within a web browser are hacks limited to specific browsers or that require third party plugins.

HTML 5 Attempts to Change the Local Storage Landscape with localstorage

HTML 5 has an attribute called localstorage that gives web developers a way to store name=value pairs locally on the hard drive from within the client browser. This data stays on the hard drive even after the customer leaves the site, closes the browser tab, or closes the whole browser. But unlike cookies, this data is never sent to the remote web server (unless the developer does so deliberately) and so doesn't affect download speed or data security.

The localstorage Attribute is Supported by Internet Explorer!

Unlike just about every other new feature in HTML 5, Internet Explorer 8 supports localstorage! It is also supported by Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOs 2, and Android 2.

This is spectacular news! This means that if you are writing applications right now you can use the localstorage attribute to store data on your customers computers that doesn't have the limitations of cookies.

Current Localstorage Limitations

The current HTML 5 Storage specification says that browsers should set a limit of 5MB per origin (host or domain). And in my research, this seems to be what most browsers have set the limit to.

There is currently no way to ask customers to increase the amount of storage available to your site or application, although Opera 10.5+ does allow users to make that change on their own.

Most of the limitations on local storage are simliar to cookie limitations, and can be controlled by the user, such as:

  • Blocking third-party storage — only allowing storage from the originating domain
  • Deleting storage contents — browsers should allow customers to delete storage data just like they can cookie data
  • Black- and whitelists of origin data — browsers can set up the ability to put domains on a blacklist and never store data from the or a whitelist to allow storage in an unrestricted manner

©2014 About.com. All rights reserved.