Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Look at the basics of WebSQL
<html>
<head>
<title>Look at WebSQL</title>
<script>
// Through the code below remember essentialy there are just 3 core methods we tend to use
// openDatabase
// transaction
// executeSql
// Opening a connection
// window.openDatabase( database name , version , database description, estimated size );
// The size is flexible but some browsers put a restriction of 5mb so know your environment
var db = window.openDatabase("myDatabase", "1.0", "My WebSQL test database", 5*1024*1024);
if(!db) {
// Test your DB was created
alert('Your DB was not created this time');
return false
}
// Prepare you statement
// With your DB working we can add tables and run queries via the transaction function
// db.transactions( transaction, error callback, ready callback )
db.transaction(
function(tx){
// Execute the SQL via a usually anonymous function
// tx.executeSql( SQL string, arrary of arguments, success callback function, failure callback function)
// To keep it simple I've added to functions below called onSuccessExecuteSql() and onFailureExecuteSql()
// to be used in the callbacks
tx.executeSql(
"CREATE TABLE IF NOT EXISTS fightclub (id INTEGER PRIMARY KEY AUTOINCREMENT, rules TEXT)",
[],
onSuccessExecuteSql,
onError
)
},
onError,
onReadyTransaction
)
// At this point you now know everything to continue. All I'm am going to do now is add
// a single record to our table
db.transaction(
function(tx){
tx.executeSql( "INSERT INTO fightclub(rules) VALUES(?)",
['You do not talk about Fight Club'],
onSuccessExecuteSql,
onError )
},
onError,
onReadyTransaction
)
// All thats left is to get the results on the page
// There where clause below is weak, but its just an example of preparing your statement
db.transaction(
function(tx){
tx.executeSql( "SELECT * FROM fightclub WHERE id > ?",
['0'],
displayResults,
onError )
},
onError,
onReadyTransaction
)
function onReadyTransaction( ){
console.log( 'Transaction completed' )
}
function onSuccessExecuteSql( tx, results ){
console.log( 'Execute SQL completed' )
}
function onError( err ){
console.log( err )
}
function displayResults( tx, results ){
if(results.rows.length == 0) {
alert("No records found");
return false;
}
var row = "";
for(var i=0; i<results.rows.length; i++) {
row += results.rows.item(i).rules + "<br/>";
}
document.body.innerHTML = row
}
</script>
</head>
<body>
</body>
</html>
@abeauseigle

This comment has been minimized.

Copy link

commented Aug 23, 2013

For a real app example, you can see https://github.com/abeauseigle/webSqlApp

Have fun.

@johannady2

This comment has been minimized.

Copy link

commented Dec 9, 2015

function onError( err ){
console.log( err )
}

just returned undefined =/

@nibosoft

This comment has been minimized.

Copy link

commented May 7, 2016

try this:
function onError( tx, err){ console.log('Error: '+ err.code+' : '+err.message ); }

@niyatip25

This comment has been minimized.

Copy link

commented Dec 13, 2016

Nicely explained

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.