HTML5 Storage

by Raymond Camden

This Guy

  • Raymond Camden
  • Developer Evangelist
  • Blogging at raymondcamden.com
  • Tweeting at @cfjedimaster

Warning...

  • Lot's of code....
  • You can download the code (and these slides) and play with it
  • github.com/cfjedimaster/html5-storage
  • jQuery fanboy in effect

Why store anything?

  • HTTP can be expensive
  • Sometimes data doesn't change
  • Connections sometimes aren't

The Game Plan

  • Talk about the technology
  • Going to show you some demos
  • Show you the support matrix

The Technologies

  • Cookies (no, really)
  • Local/Session Storage
  • WebSQL
  • IndexedDB
  • FileSystem API

Cookies

  • Oldest and probably the safest
  • Read/Write on both client and server (*)
  • Reread the above - it gets sent back and forth
  • Limited on both sides in terms of count/individual size
  • Simple values, but you could encode

Cookies - Possible Uses?

  • Authentication/Authorization
  • Preferences that the server needs to know

Cookies - How Many?

  • According to the spec: (Feb 1997)
  • At least 300 cookies (per browser)
  • At least 4096 bytes per cookie
  • At least 20 per unique host
  • No good way to handle rejection

Cookies - Example


document.cookie="key=value;args..";

Cookies - Demo

Cookies - When can I use it?

Everywhere! *

LocalStorage (aka DOM Storage)

  • API to set name/value pairs, remove items
  • You can also directly get/set
  • Simple values (JSON FTW)
  • Totally stored on the client only
  • Session based version
  • Spec

LocalStorage - Possible Uses?

  • Preferences your server doesn't need to know
  • Search history
  • "Favorited" content items
  • User "State" vs User "Storage" (credit: Ido Green)

LocalStorage - How Many?

LocalStorage - Example


//API way
localStorage.setItem("name", "value");
var x = localStorage.getItem("name");
localStorage.removeItem("name");
localStorage.clear();

//Non API way
localStorage["name"] = "value";
var x = localStorage["name"];
delete localStorage["name"];
for(var x in localStorage) delete localStorage[x];

LocalStorage - Demo

LocalStorage - FYI

  • Chrome Dev Tools (view/edit)
  • LocalStorage Monitor (chrome web store)
  • There is an event - but it is wonky (test4.html)

LocalStorage - When can I use it?

WebSQL

  • Know SQL? You can use WebSQL
  • "Mini" file-based database (SQLite) in your browser
  • You can open a database, run SQL, even use transactions
  • Asynchronous
  • Spec

WebSQL - Possible Uses?

  • Storing a lot of content
  • Storing content you want to search

WebSQL - How Many/How Big?

  • 5 megs
  • User may be prompted for more

WebSQL - Example


db = window.openDatabase("name","1","nice name",5*1024*1024);
db.readTransaction(function(tx) {
  tx.executeSql("select id,title from notes", [], 
    function(tx, results) {
      for(var i=0, len=results.rows.length; i<len;i++) {
	    var row = results.rows.item(i);
	    console.log(i+" id="+row.id+" title="+row.title);
      }
    }
}

WebSQL - Demo

WebSQL - FYI

  • Chrome Dev Tools (view/edit)
  • And yeah - run arbitrary SQL

WebSQL - When can I use it?

IndexedDB

  • Storage for "significant amounts of structured data" (source: MDN)
  • More "free form" storage than WebSQL
  • Uses an Index based API
  • Asynchronous + Transaction
  • Spec

IndexedDB - How Many/How Big?

  • 50 megs
  • User may be prompted for more

IndexedDB - Index wha???

  • Getting values can be done by key (think primary key)
  • And by range (think list) on an index
  • You can make an index on any(*) property
  • No free form search ala SQL
  • So I can do "CamA to CamB" but not "CaXden"

IndexedDB - Creation is Tricky

  • You can only change structure by changing version
  • If a user had version 1 and you're on version 3, you have to maintain the code to update between them
  • So yeah, get it right the first time
  • And oh yeah - Chrome doesn't work right yet

IndexedDB - Basic Terms

key
The primary key, can be autogenerated
objectstore
One set of data. Think table.
index
A way to get at the data and there can be more than one per object
cursor
A way to iterate over objects
key range
A way to specify a range of keys to be returned

IndexedDB - Demo

IndexedDB - FYI

  • Chrome Dev Tools (view)

IndexedDB - When can I use it?

Just in case you missed it...

  • WebSQL - great mobile support (all iOS, all Android)
  • IndexedDB - no mobile support (iOS6 maybe, or Jelly Bean for all 2 of you)

FileSystem

  • Not the File API (spec), but we use it
  • A sandbox for temporary/persistent file storage
  • Asynchronous API for reading/writing/deleting directories and files
  • Basic quota API (required for persistent storage)
  • Spec

FileSystem - Possible Uses?

  • Storing binary resources for games/apps
  • Storing drag/dropped files
  • User may be prompted for more

FileSystem - How Big?

  • Ask the Quota API and good luck with that
  • User will be prompted for persistent storage
  • User is then prompted for more storage
  • No way to disable it

What you can do (OOTB)

  • Create a single directory
  • List the contents of a directory
  • Remove a directory recursively
  • Create a file
  • Get file metadata
  • Remove a file
  • Copy or move a file

FileSystem Key Objects

  • FileSystem
  • DirectoryReader
  • DirectoryEntry
  • FileReader
  • FileWriter
  • FileEntry

FileSystem - Demo

FileSystem - FYI

  • HTML5 File System Explorer (link)
  • Terminal (link)

FileSystem - When can I use it?

Wrap Up

Useful Resources

  • webplatform.org
  • html5rocks.com
  • diveintohtml5.info
  • developer.mozilla.org
  • html5bookmarks.com

Questions?

  • email: raymondcamden@gmail.com
  • web: raymondcamden.com
  • stupid crap: @cfjedimaster