Surfin' Safari

WebKit Does HTML5 Client-side Database Storage

Posted by Brady Eidson on Friday, October 19th, 2007 at 4:04 pm

The 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.
DatabaseInspector

41 Responses to “WebKit Does HTML5 Client-side Database Storage”

  1. David Smith Says:

    Woohoo! :D

  2. mjimenez Says:

    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).

  3. Pingback from Waldo Jaquith » Blog » Client-side databases in HTML 5.:

    [...] 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. [...]

  4. keithahern Says:

    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.

  5. Oliver Says:

    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 :D

  6. maciej Says:

    @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.

  7. Pingback from Andra P žurnāls » Blog Archive » WebKit dzinis ievieš klienta puses datubāzes:

    [...] 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. [...]

  8. Pingback from Webkit ofrece base de datos en el cliente:

    [...] última implementación de Webkit, la base del navegador Safari de Apple ofrece una implementación del estándar HTML 5, [...]

  9. Pingback from Extenuating Circumstances – links for 2007-10-20:

    [...] Surfin’ Safari – Blog Archive » WebKit Does HTML5 Client-side Database Storage (tags: clientside database html5 webkit storage safari apple macosx api sqlite sql) [...]

  10. jcburns Says:

    and where exactly is ‘NoteTest’ being stored on the local volume?

  11. Pingback from IT-eye » A database in your browser:

    [...] 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 [...]

  12. jcburns Says:

    Ah, answer seems to be: ~/Library/WebKit/Databases/

  13. Pingback from soeren says » Blog Archive » Random but relevant notes on the iPhone:

    [...] 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 [...]

  14. Pingback from ArtLung Blog » All The Misc That’s Fit to Misc:

    [...] 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. [...]

  15. Pingback from links for 2007-10-20 « Treat with Jermolene:

    [...] 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 [...]

  16. Pingback from WebKit ya integra almacenamiento en el cliente | aNieto2K:

    [...] 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, [...]

  17. Pingback from User First Web » Browser Client-Side Database Storage:

    [...] 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 [...]

  18. Pingback from User First Web » links for 2007-10-21:

    [...] 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) [...]

  19. dglazkov Says:

    Which build has this? The r26759 for Win doesn’t seem to have it.

  20. Pingback from AndrewSkinner.name » Blog Archive » links for 2007-10-22:

    [...] 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) [...]

  21. Pingback from Το WebKit είναι η πρώτη rendering engine που υποστιρίζει client-side database αποθήκευση!:

    [...] και Konqueror, είναι πρώτη μηχανή rendering που θα υποστηρίξει HTML5 client-side database αποθήκευση. Αυτό με πολύ απλά λόγια σημαίνει πως οι browsers που [...]

  22. Pingback from What’s in Leopard for Designers (2): WebKit & Safari « counternotions:

    [...] to HTML5 client-side database storage! The emerging API allows the browser to store structured data using plain old SQL. Further, Apple [...]

  23. Pingback from .liferc » Blog Archive » pywebkitgtk support for html5 client-side storage support:

    [...] 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 [...]

  24. Mark Rowe Says:

    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.

  25. Pingback from Safari incorporará almacenamiento de bases de datos en el cliente siguiendo el estándar HTML 5 : planetamac:

    [...] indican en Surfin’ Safari, el blog sobre el desarrollo de WebKit. Están trabajando en implementar varias características de [...]

  26. Trackback from veeliam:

    HTML 5 & WebKit…

    As a postscript, couldn’t they have implemented more?
    ……

  27. Pingback from Javascript News » Blog Archive » WebKit Does HTML5 Client-side Database Storage:

    [...] WebKit team has implemented an implementation of the HTML 5 client side storage API which gives you an asynchronous API: PLAIN TEXT [...]

  28. Pingback from napyfab:blog» Blog Archive » links for 2007-10-22:

    [...] Surfin’ Safari – Blog Archive » WebKit Does HTML5 Client-side Database Storage (tags: apple browser database safari webkit html5 client storage offline) [...]

  29. dglazkov Says:

    Here you go:

    http://glazkov.com/blog/html5-gears-wrapper/

  30. eyelidlessness Says:

    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.)

  31. Pingback from HTML5 client-side database storage:

    [...] 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 [...]

  32. randallfarmer Says:

    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!

  33. Pingback from Web apps in offline mode « Laurent’s Weblog:

    [...] Surfin’ Safari [...]

  34. Pingback from BrianBal.com » Blog Archive » WebKit and HTML5 Client Side Database:

    [...] 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 [...]

  35. Pingback from Alp Toker » Blog Archive » GTK+ Matters:

    [...] An application hosting OS X Dashboard widgets (widgets can store data locally using HTML5 client-side database storage): [...]

  36. Pingback from WebKit has JavaScript API for client-side database storage - by Gadget, shop online blog of TechChee.com:

    [...] via  More on Webkit blog [...]

  37. Pingback from Safari: supporto per i database sul client - ReFactor.it:

    [...] 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: [...]

  38. Pingback from Surfin’ Safari - Blog Archive » Ten New Things in WebKit 3:

    [...] 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 [...]

  39. Pingback from Surfin’ Safari - Blog Archive » Web Inspector Update:

    [...] 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 [...]

  40. heat_miser Says:

    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?

  41. Rene Says:

    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.