Storing Arrays in LocalStorage

December 6, 2013 at 4:48 pm in HTML5, Javascript, Web Storage

LocalStorage is amazing. We can persist data right on the client’s computer in the browser. We’ll have 5 to 10 MB of storage available.  However, it’s often not quite good enough for our needs; the values we store must be strings.

But with the help of JSON.stringify() and JSON.parse(), we can use LocalStorage for much more.

var names = [];
// collect some stuff into  the names array.
for(var count=0; count < 5; count++){
  names.push(prompt("New member name?"));

// convert the array of names into a JSON string. 
localStorage["names"] = JSON.stringify(names);

Later, we’ll want to retrieve those from the localStorage database. So we turn the string back into an array like this:

var namesFromLocalStorage = JSON.parse(localStorage["names"]);

You could use LocalStorage as a cache for all sorts of things. Simple arrays, complex objects, and even content. Prefetch records from the backend in the background, push it into LocalStorage as a simple cache. When the user hits the “next page” button, display the results of LocalStorage’s content while fetching the next set of records.

How are you using LocalStorage in your projects?

No comments

The blockquote element

November 4, 2013 at 9:05 pm in HTML5, Semantic Markup

In HTML5, the <blockquote> element is meant to be used to mark up quotes from external sources, with or without citations. The specification has recently been altered to allow developers to place <cite> tags, used for citations, inside of the <blockquote> tags.

You can mark up a citation to a quote like this now:

    The blockquote element represents a section that is quoted
    from another source.
    Content inside a blockquote must be quoted from
    another source, whose address, if it has one, 
    may be cited in the cite attribute.
    - <cite>
        <a href="">W3C HTML5 Blockquote specification</a>


Pretty awesome stuff.

No comments

HTML5 and CSS3 Second Edition In Beta

June 19, 2013 at 12:18 am in HTML5

In the last three years, HTML5 and CSS3 have only gotten better, and browser support has improved vastly. We have many more tools in our arsenal, but the original HTML5 and CSS3 book I wrote in 2010 was quickly becoming out of date. IE6 and IE7 have been dropped by Microsoft, which opens up a lot more possibilities, and technologies that were just getting off the ground in 2010 are much more stable now. So it was time to do a new version of the book.

This revised second edition walks you through new features such as IndexedDB, CSS Animations, SVG, and more, along with updated fallback solutions. You’ll use HTML5’s new markup to create better structure for your content and better interfaces for your forms. You’ll work with new form controls and validations, and build interfaces that are accessible to assistive technology and mobile devices. You’ll draw with the Canvas and SVG, do simple animations with pure CSS, work with advanced CSS selectors, and make audio and video play natively.

You’ll bring your web apps to the next level as you use Web Storage and IndexedDB to save data on the client and make applications available offline. And you’ll discover how to use web sockets, geolocation, cross-document messaging, and the History API to create even more interactive applications.

Please go check it out over at the book’s web site.

No comments

The Mimimal HTML5 page.

February 19, 2012 at 3:28 pm in HTML5

According to this very informative article, the amount of code you need for a valid HTML5 page is quite small. In fact, it’s as simple as

<!DOCTYPE html>
Smallest HTML file!

Modern web browsers will actually automatically fill in the rest the details for you. I believe it’s still good practice to include all of the proper HTML markup in your document. Just because browsers can rewrite your document for you doesn’t mean you should let them.

No comments

Revenge of the self-closing tags!

April 4, 2011 at 5:51 pm in HTML5, video

Developers who’ve been working with XHTML for a long time tend to feel a little awkward when they first notice the lack of self-closing tags in HTML5 markup. But HTML5 isn’t derived from XML, so it’s not going to conform to the same rules that XHTML did. However, the sepcification says it’s fine to have self-closing tags in our HTML5 markup.

The problem with self-closing tags in documents served with the text/html mimetype is that browsers start stripping off those self-closing tags. After all, HTML documents never had self-closing tags, and XHTML documents are supposed to be served with a different MIME type which is unfortunately incompatible with IE 6,7, and 8.

But because of browser inconsistencies, we’re starting to see some self-closing tags make their way into valid HTML5 documents again. One placei n particular is the source element in HTML5 video.

 <source src="" 
               type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

It seems that due to some strange parsing bugs, the video element doesn’t load properly unless the source tag is self-closed.

It’s an unfortunate side-effect of ten years of exceptions upon hacks upon exceptions.

No comments

iOS 4.2 and HTML5, Sitting In A Tree…

November 29, 2010 at 8:17 pm in CSS3, HTML5, Uncategorized

Devices running iOS 4.2 now support Web Sockets in Mobile Safari. This is great news for services that want to use Web Sockets and can’t rely on a Flash fallback.

iOS 4.2 also now supports TrueType Fonts and they look pretty snazzy.

The iOS devices have had great HTML5 and CSS3 support. LocalStorage works quite well, as do things like CSS3 transformations, pseudoclasses, and multi-column layouts. Offline support works great too, so it fou’yre looking for a neat way to build an offline mobile app for the iPad, you’ve got all the tools you need.

No comments

The “Death” of Web SQL Databases?

November 22, 2010 at 10:31 pm in HTML5, Mobile, Offline, Web SQL

Recently, the W3C’s working group announced that it will no longer advance the specification for Web SQL Databases. Mozilla has taken the stance that they won’t implement the specification mainly because they don’t like the fact that it relies on SQLite’s implementation of SQL. So does this mean that Web SQL Databases are dead?

Hardly. All of the WebKit-based browsers have implemented this technology, and no current browsers implement the proposed IndexedDB solution which the W3C is now focusing on. Mozilla won’t ever implement Web SQL Databases, it’s unlikely that Opera and Microsoft ever will either, but considering that all iPhones, iPods, iPads, and Android devices currently do support this specification, it’s not going away any time soon.

Building an offline application for the iPad? Web SQL Storage is pretty nice stuff, especially when you combine it with HTML5’s offline browsing capabilities. In the book, we focus on that very example.

It’s far from dead. In fact it’s quite stable. The specification even provides transactions, so it’s good enough. Far better than some of the other specifications that many browser makers actually “agree” on.

1 comment

Todo List with Backbone.js and LocalStorage

October 26, 2010 at 5:34 pm in HTML5, Javascript, Web Storage

HTML5’s Web Storage API lets us store data on the client’s machine without using cookies. You can use this to build complete client-side applications using HTML and JavaScript. One of the neatest examples of this so far is this simple To-Do list application which uses the Backbone.js framework. As a bonus, the source code for the application is annotated!

What a great way to demonstrate the usefulness of localStorage!

No comments