Working with HTML5 localStorage()

the Editor — Tue, 11 May 2010 09:41:40 +0000

HTML5 is fast approaching and getting wide spread usage. Most are familiar with the new tags like header, section and footer and everybody is aware of the new video tags thanks to Apple vs Adobe. However, there is a lot more to HTML5 those just those two aspects.

I want to focus on localStorage() this time. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

Browser support is always a huge topic when discussing new html5 or even css3 aspects. This is due to such a wide spread of support from the big browsers right now. In the case of localStorage, it is supported by Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+. This only leaves out Opera who currently does not support this storage. Depending on your target audience browser support may be an issue for you.

HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking web app using localStorage as the sole database. The series will walk you through the basics of localStorage to advanced techniques to leverage the power of this new html5 database. We won’t stop at just the functionality of the app but in part four we will cover styling the app with html5 and css3 to create an iPhone(ish) web app.

Here is a quick example of what the javascript looks like to access localStorage();

if (typeof(localStorage) == ‘undefined’ ) {
alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
} else {
try {
localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value”
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(‘Quota exceeded!’); //data wasn’t successfully saved due to quota exceed so throw an error
}
}

document.write(localStorage.getItem(“name”)); //Hello World!
localStorage.removeItem(“name”); //deletes the matching item from the database
}

In the code snippet above we are doing several things including checking if your browser supports localStorage, saving a new item to the database, retrieving that item and displaying it and then removing the item. The above is your typical Hello World example but shows you just how easy it is to use. The time tracking app we will create will be storing a unique id as the key and joining multiple values into one string, as localStorage only supports storing of strings. I will be making the source code available at the end of each article along with the full source and the working app at the end of the series, which you can follow here.

” Written for HTML5Tutorial.net by James Fleeting, a web designer and developer obsessed with the future of the web working at Crane | West Advertising Agency in Wichita Falls, Texas. “

HTML 5 Attributes

the Editor — Wed, 02 Sep 2009 10:51:55 +0000

Below is a complete list of HTML 5 attributes, as we mentioned in our HTML 5 Reference article we will be providing a downloadable HTML 5 Attributes cheat sheet in the coming days.

4* The element is defined in HTML 4+
5* The element is defined in HTML 5

Attribute	Value	Description	4	5
accesskey	character	Specifies a keyboard shortcut to access an element	4
class	classname	Specifies a classname for an element (used to specify a class in a style sheet)	4	5
contenteditable	true false	Specifies whether or not a user is allowed to edit the content		5
contextmenu	menu_id	Specifies the context menu for an element		5
dir	ltr rtl	Specifies the text direction for the content in an element	4	5
draggable	true false auto	Specifies whether or not a user is allowed to drag an element		5
id	id	Specifies a unique id for an element	4	5
irrelevant	true false	Specifies whether or not a element is irrelevant. An irrelevant element is not displayed		5
lang	language_code	Specifies a language code for the content in an element	4	5
ref	URL / id	Specifies a reference to another document / another part of a document (use only if the template attribute is set)		5
registrationmark	reg_mark	Specifies a registration mark for an element		5
style	style_definition	Specifies an inline style for an element	4	5
tabindex	number	Specifies the tab order of an element	4	5
template	URL / id	Specifies a reference to another document / another part of the document that should be applied to an element		5
title	text	Specifies extra information about an element	4	5

The above list is only a Standard Attribute list, if and when more HTML Attributes become available we will update this article.

HTML 5 Tutorial » HTML 5 Attributes

Working with HTML5 localStorage()

HTML 5 Attributes