WebKit Does HTML5 Client-side Database Storage
Posted by Brady Eidson on Friday, October 19th, 2007 at 4:04 pmThe current working spec for the HTML5 standard has a lot of exciting features we would eventually like to implement in WebKit. One feature we felt was exciting enough to tackle now even though the spec is still in flux is client-side database storage. So for the last few weeks andersca, xenon, and I have been cooking up an implementation!
The client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with - SQL.
The API is asynchronous and uses callback functions to track the results of a database query.
Compact usage defining a callback function on the fly might look something like this:
var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM test", function(result1) {
// do something with the results
database.executeSql("DROP TABLE test", function(result2) {
// do some more stuff
alert("My second database query finished executing!");
});
});
There will also be a small example of how to use the API in a real site that we’ll try to keep up to date as things evolve.
This initial implementation has some things missing from the spec as well as a few known bugs. But it does the basics and the best way to discover what needs work is to get it out there for people to start using it!
If you find any bugs, would like to suggest features, or have gripes about the spec itself, please drop by #webkit or drop us a line on the WebKit email lists.
Oh, and one more thing…
We’re landing this initial implementation with pretty cool Web Inspector support!
So far you can view the full contents of any table and run arbitrary queries on each database a page is using. We have a lot of ideas for improvements but would also love to hear yours.

October 19th, 2007 at 4:06 pm
Woohoo!
October 19th, 2007 at 6:16 pm
Guessing the databases are implemented with sqlite?
A little concerned about security. Are the databases domain specific and only needing to be unique for a single domain (I imagine many “foo” databases created soon :-))
Also, any tracking for who made the last change. Seems like a good target to break a website by changing data it expected to be a certain set of values. (I’m sure the spec must go into more detail, but I’m a touch lazy ATM).
October 19th, 2007 at 8:12 pm
[...] The HTML 5 spec includes client-side database storage. In SQL. My mind? Blown. Thank God for WHATWG. There have been no meaningful advances in HTML for a decade. [...]
October 19th, 2007 at 8:18 pm
How does this relate to something like google gears? I’m also surprised that a plain old RDBMS the the DB of choice - surely an OODB or RDFDB would have been more appropriate in 2007? The first thing most modern web developers do is stick an OO wrapper in front of their DB.
October 19th, 2007 at 8:56 pm
mjimenez: I believe it’s a DB per domain, and the domain can specify the degree of access available outside of the domain. See the HTML5 draft for details.
keithahern: There are many reasons i can think of for not using OODBs, etc, but quite frankly i’m not informed enough for my opinions to be worth sharing, so i’ll go to the best reason: the spec says so
October 19th, 2007 at 8:57 pm
@mjimenez
Databases only have to be unique for a single domain and are protected by the same-origin policy, so it shouldn’t create much more in the way of security issues than, say, cookies.
October 19th, 2007 at 11:41 pm
[...] WebKit blogā teikts, ka jaunākajā Webkit (Dzinis uz ko darbojas Safari pārlūks) nightly builds ir implementētas HTML5 klienta puses datubāzes. Tas nozīmē, ka web aplikācijas klienta pusē varētu uzglabāt un operēt ar datiem, izmantojot parastus SQL pieprasījumus. Pieprasījumi notiek ar Javascript palīdzību un ir asinhroni. [...]
October 20th, 2007 at 3:05 am
[...] última implementación de Webkit, la base del navegador Safari de Apple ofrece una implementación del estándar HTML 5, [...]
October 20th, 2007 at 3:23 am
[...] Surfin’ Safari - Blog Archive » WebKit Does HTML5 Client-side Database Storage (tags: clientside database html5 webkit storage safari apple macosx api sqlite sql) [...]
October 20th, 2007 at 4:52 am
and where exactly is ‘NoteTest’ being stored on the local volume?
October 20th, 2007 at 5:12 am
[...] Safari is writing about a new HTML 5 feature just implemented in WebKit, the core of Safari: Client-side database storage. It enables you to create a database on the client, and execute sql statements in javascript. I [...]
October 20th, 2007 at 5:32 am
Ah, answer seems to be: ~/Library/WebKit/Databases/
October 20th, 2007 at 9:06 am
[...] solution to this matter, is coming to the iPhone has been rampant, but now the WebKit team has presented an even sweeter solution. Safari hasn’t been too fast about merging in changes from the WebKit development trunk [...]
October 20th, 2007 at 9:25 am
[...] WebKit now has an implementation of a local SQL database (via John Gruber). That’s odd, and cool. It seems to be what Google Gears is trying to do, or what Flash does with its Local Shared Objects. All of these kick the butt of mere cookies for storage. The real thing they allow is to allow web applications to work without an internet connection. What’s WebKit? It’s the engine inside Safari and KDE browsers. This local storage thing is being discussed with great enthusiasm these days seems like. It’s still a great time to be working on web stuff. [...]
October 20th, 2007 at 11:20 am
[...] Surfin’ Safari - Blog Archive » WebKit Does HTML5 Client-side Database Storage Offline data storage for Safari (and presumably the iPhone). Interesting that it’s not compatible with Google Gears (they’ve gone for the WHATWG HTML 5 spec instead) (tags: data offline javascript tiddlywiki safari webkit html5 whatwg) Posted by jermolene Filed in Uncategorized [...]
October 20th, 2007 at 12:04 pm
[...] paso en este sentido, y despues de haber añadido la implementación correcta de @font-face, ahora añaden la base de datos con una API asincrona para trabajar con ella. El lenguaje usado para trabajar con la base de datos, [...]
October 20th, 2007 at 4:07 pm
[...] of the big features in HTML5 has been implemented by the Safari developers and it’s a doozy that I wasn’t aware of: client-side database [...]
October 21st, 2007 at 12:22 am
[...] Surfin’ Safari - Blog Archive » WebKit Does HTML5 Client-side Database Storage Very cool. Client-side databases in the browser. SQL access. One database per domain like cookies. (tags: sql browsers safari api databases) [...]
October 21st, 2007 at 5:25 pm
Which build has this? The r26759 for Win doesn’t seem to have it.
October 21st, 2007 at 6:18 pm
[...] Surfin’ Safari - Blog Archive » WebKit Does HTML5 Client-side Database Storage Holy shit! This is great news for web developers. I’ve only just got my head around google gears too. (tags: Apple browser browsers client code html5 safari javascript html web database webkit) [...]
October 22nd, 2007 at 12:28 am
[...] και Konqueror, είναι πρώτη μηχανή rendering που θα υποστηρίξει HTML5 client-side database αποθήκευση. Αυτό με πολύ απλά λόγια σημαίνει πως οι browsers που [...]
October 22nd, 2007 at 1:24 am
[...] to HTML5 client-side database storage! The emerging API allows the browser to store structured data using plain old SQL. Further, Apple [...]
October 22nd, 2007 at 2:02 am
[...] weekend WebKit has added support for html5’s client-side database storage. This is so that web apps can manage application state even when the user is offline (heard of [...]
October 22nd, 2007 at 3:09 am
None of the Windows builds have this at present. Current WebKit builds on Windows are not compatible with publicly released versions of Safari, so we have stopped providing new nightly builds until a compatible Safari is made available.
October 22nd, 2007 at 11:23 am
[...] indican en Surfin’ Safari, el blog sobre el desarrollo de WebKit. Están trabajando en implementar varias características de [...]
October 22nd, 2007 at 12:42 pm
HTML 5 & WebKit…
As a postscript, couldn’t they have implemented more?
……
October 22nd, 2007 at 12:59 pm
[...] WebKit team has implemented an implementation of the HTML 5 client side storage API which gives you an asynchronous API: PLAIN TEXT [...]
October 22nd, 2007 at 4:32 pm
[...] Surfin’ Safari - Blog Archive » WebKit Does HTML5 Client-side Database Storage (tags: apple browser database safari webkit html5 client storage offline) [...]
October 22nd, 2007 at 7:13 pm
Here you go:
http://glazkov.com/blog/html5-gears-wrapper/
October 22nd, 2007 at 8:17 pm
Is there a chance this feature will see the light of day in Safari for Leopard, or will we have to wait for pre-Ocelot betas before we can expect users of our apps to be able to use it? (Not meant as a criticism, I’m sure it’s bureaucratic Apple marketing policy that makes their Safari release schedule so lame. Just curious what the future of Safari looks like as far as releases.)
October 23rd, 2007 at 3:13 am
[...] specification document is still in the works so changes are going to happen over the coming period. WebKit has already built a working example of the new specification. In order for this to work though you [...]
October 23rd, 2007 at 4:49 pm
Haha, go dglazkov!
Not only is HTML5 database stuff low-hanging fruit for Gears, but Gears-like functionality might be low-hanging fruit for future Safari development. (So, a local HTTP server and maybe a resource pool.) Cross-platform offline Web apps for the win!
October 24th, 2007 at 1:48 am
[...] Surfin’ Safari [...]
October 26th, 2007 at 11:19 am
[...] WebKit project now includes HTML5 client side databases. I can’t wait to try this out! The current working spec for the HTML5 standard has a lot of [...]
October 29th, 2007 at 1:16 am
[...] An application hosting OS X Dashboard widgets (widgets can store data locally using HTML5 client-side database storage): [...]
October 30th, 2007 at 9:07 pm
[...] via More on Webkit blog [...]
November 1st, 2007 at 6:14 am
[...] Adesso è il turno dei dati: le specifiche per l’HTML 5 prevedono la possibilità di utilizzare database SQL direttamente dal client, rendendo possibili cose come questa, riportata nel post: [...]
November 15th, 2007 at 4:42 am
[...] a lot of great new features in the latest development trunk of WebKit - features like web fonts, client-side database storage, CSS transforms and CSS animation. But I’d like to take a step back and talk about all the [...]
December 6th, 2007 at 12:55 pm
[...] now supports the HTML5 SQL storage API, and the Inspector has full support for this new feature. You can execute SQL queries right in the [...]
January 3rd, 2008 at 3:30 pm
The local storage is fantastic, but not having an “offline” mode, or a local web server, kind of cripples it, especially in a mobile context. I wonder if there are any plans to implement this in WebKit 3?
January 23rd, 2008 at 2:16 pm
This is awesome! Working locally with datasets and sync with the server only when needed - thats what I’ve been waiting for ages. I hope it will be well secured, like crypted data, etc.