Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo WEB SQL Database HTML5 / JavaScript</title>
    <meta charset="UTF-8">
 </head>
  <body>
      <script>

	// Criando banco
        var db = openDatabase("Teste", "1.0", "Teste", 1024);
        if(window.openDatabase){
            console.log("Banco de dados Criado");
        } else {
            console.log("Erro ao criar banco de dados");
        }

	// Criando tabela
        db.transaction(function(tx) {
            tx.executeSql("create table if not exists teste (nome varchar(100))",null,sucesso,erro);
            mostraRegistros();
            console.log("Tabela Criada com Sucesso");
        });

	// LOGS DE ERROS:
        function erro(tx,erro){
            console.log("Erro ao executar comando\n"+erro.message);
        }
        function sucesso(tx,sucesso){
            console.log("Comando executado com sucesso",sucesso.message);
        }

	//insere no banco
        function insere(){
            db.transaction(function(tx) {
                var nome = document.getElementById('nome').value;
		alert(nome);
                console.log("Executando SQL...");
                tx.executeSql("insert into teste (nome) values (?)",[nome] ,sucesso,erro);
                console.log("Executando SQL... OK");
                mostraRegistros();
            });
        };

	//limpa tabela
        function deleta(){
            db.transaction(function(tx) {
            tx.executeSql("delete from teste",null,sucesso,erro);
            mostraRegistros();
            console.log("Tabela Deletada");
        });
        }

        //mostra registros
           function mostraRegistros(){
              var html = "";
              db.transaction(function(transaction){
                transaction.executeSql("SELECT * FROM teste", [] ,
                   function(transaction, result){
                            for(var i = 0; i < result.rows.length; i++){
                                html += "Nome:"+result.rows.item(i)[['nome']]+"<br>";
                    }
                    document.getElementById('registros').innerHTML = html;
                 },
                 null
             );
         });
       }
      </script>

      <input id="nome">
      <button id="salva" onclick="insere()">Salvar</button>
      <button id="deleta" onclick="deleta()">Limpar Tabela</button>
      <p id="registros"></p>
  </body>
</html>