Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Javascript & Web SQL example
@author Ben Poole,
Example HTML5 code for playing with the local WebKit (Opera too?) SQL database.
<meta charset="UTF-8" />
<title>Winkles Of The World Unite!</title>
<style type="text/css">
body {font-family: Helvetica, sans-serif; font-size: 100%; line-height: 1.4em}
input, button {width: 25em; font-size: 100%; padding: .25em}
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Generic error callback for db transactions
var errCallback = function(){
alert("Oh noes! There haz bin a datamabase error!");
// Open / initialise the db - this will fail in browsers like Firefox & IE
var db = openDatabase("winkles", "1.0", "Winkles Of The World", 32678);
// Create winkles table if required
transaction.executeSql("CREATE TABLE IF NOT EXISTS winkles (" +
"winklename TEXT NOT NULL, location TEXT NOT NULL);");
// This is the SAVE function
var saveWinkle = function(winklename, location, successCallback){
transaction.executeSql(("INSERT INTO winkles (winklename, location) VALUES (?, ?);"),
[winklename, location], function(transaction, results){successCallback(results);}, errCallback);
// This is a LOAD function, which pulls all winkles for a given location
var loadWinkles = function(location, successCallback){
transaction.executeSql(("SELECT * FROM winkles WHERE location=?"), [location],
function(transaction, results){successCallback(results);}, errCallback);
// Document ready event. Time for some subversive injection, hurr hurr
var form = $("form");
// Callback when loading data (@see showWinkles())
var updatePage = function(results){
var list = $("#winkle-list");
if (results.rows.length==0){
alert("Alas, there be no winkles here.");
} else {
$.each(results.rows, function(rowIndex){
var row = results.rows.item(rowIndex);
list.append( "<li>" + row.winklename + ", " + row.location + "</li>");
// Override the default form submit in favour of our code
saveWinkle($('#winklename').val(), $('#location').val(), function(){
alert($('#winklename').val() + "'s data has been saved!");
// Bind winkle listing to a button in the page
$('#show-me').click(function(){loadWinkles($('#where').val(), updatePage);});
<h1>Winkles Of The World Unite</h1>
<p>This wee bit of example code accompanies the blog post, <cite><a href="">Off-line web apps: local Web SQL &amp; Javascript</a></cite> over at <a href=""></a>.</p>
<h2>Winkle name &amp; location:</h2>
<p><input type="text" id="winklename" name="winklename" class="name" placeholder="Winkle name here" /></p>
<p><input type="text" id="location" name="location" class="location" placeholder="Winkle location here" /></p>
<p><input type="submit" value="Save this winkle" /></p>
<p>Type in a location below &amp; then click the button to see what we&#8217;ve got:</p>
<p><input id="where" name="where" placeholder="Location to check for winkles" /></p>
<p><input type="button" id="show-me" value="Show me the winkles!" /></p>
<h2>Winkle list</h2>
<ul id="winkle-list"><!-- set by updatePage() --></ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment