Local Storage

You are here: Home Dive Into HTML5 Diving In Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. Historically, web applications have had none of these luxuries. Cookies are included with every HTTP request, thereby slowing down your web application by needlessly transmitting the same data over and over Cookies are included with every HTTP request, thereby sending data unencrypted over the internet (unless your entire web application is served over SSL) Cookies are limited to about 4 KB of data — enough to slow down your application (see above), but not enough to be terribly useful What we really want is a lot of storage space on the client that persists beyond a page refresh and isn’t transmitted to the server Introducing HTML5 Storage HTML5 storage:

Canvas You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .

Creating mobile Web applications with HTML 5, Part 2: Unlock local storage for mobile Web applications with HTML 5 02 Jun 2010: Added links to Part 3 of this series in About this series, Summary, and Resources sections. 08 Jun 2010: Added links to Part 4 of this series in About this series, Summary, and Resources sections. 29 Jun 2010: Added links to Part 5 of this series in About this series, Summary, and Resources sections. About this series HTML 5 is a very hyped technology, but with good reason. In this five-part series, you will take a closer look at several of those new technologies that are part of HTML 5 and can have a huge impact on mobile Web application development. Back to top Prerequisites In this article, you will develop Web applications using the latest Web technologies. Local storage 101 Web developers have struggled with storing data on the client for ages. Fortunately for Web developers, the HTML 5 specification finally contains a standard for local storage that is implemented by a wide variety of browsers. The Storage APIs The localStorage API is quite simple. Listing 1. Saving locally

A Complete Guide to the Table Element The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going to look at how to use them, when to use them, and everything else you need to know. A Very Basic Example Here's a very simple demo of tabular data: It is data that is useful across multiple axis. Head and Body One thing we didn't do in the very basic example above is semantically indicate that the first row was the header of the table. That HTML would be like this: When you use <thead>, there must be no <tr> that is a direct child of <table>. Foot Along with <thead> and <tbody> there is <tfoot> for wrapping table rows that indicate the footer of the table. What is unique about <tfoot> is the placement in the HTML. Despite coming first in the source order, <tfoot> does indeed render at the bottom of the table, making it a rather unusual HTML element. Basic Styling Then:

Learn REST: A Tutorial A server response in REST is often an XML file; for example, <parts-list><part id="3322"><name>ACME Boomerang</name><desc> Used by Coyote in <i>Zoom at the Top</i>, 1962 </desc><price currency="usd" quantity="1">17.32</price><uri> id="783"><name>ACME Dehydrated Boulders</name><desc> Used by Coyote in <i>Scrambled Aches</i>, 1957 </desc><price currency="usd" quantity="pack">19.95</price><uri> However, other formats can also be used; unlike SOAP services, REST is not bound to XML in any way. Each format has its own advantages and disadvantages. One option is not acceptable as a REST response format, except in very specific cases: HTML, or any other format which is meant for human consumption and is not easily processed by clients.