No artigo anterior "HTML5 Local Storage: Web Storage", introduz brevemente como usar o LocalStorage para implementar o armazenamento local; De fato, além de SessionStorage e LocalStorage, o HTML5 também suporta armazenamento de dados local por meio de bancos de dados locais. O HTML5 usa um banco de dados do tipo arquivo, como o SQLLITE, que se concentra principalmente em dispositivos incorporados. Os alunos familiarizados com o desenvolvimento do iOS/Android devem estar familiarizados com os bancos de dados SQLLITE.
A operação do banco de dados no HTML5 é relativamente simples, com duas funções principais:
1. Crie um objeto para acessar o banco de dados através do método de opendatabasevar db = opendatabase (nome do banco de dados, versão, descrição, tamanho)
Este método possui quatro parâmetros e suas funções são:
Nome do banco de dados: nome do banco de dados;
Versão: Número da versão do banco de dados, sem preenchimento;
Descrição: Descrição do banco de dados;
Tamanho: o tamanho do espaço alocado para o banco de dados;
2. Use o objeto de acesso ao banco de dados (como o dB) criado na primeira etapa para executar o método de transação para executar o processamento de transaçõesdb.transaction (função (tx)) {
// execute a declaração para acessar o banco de dados
});
O método de transação usa uma função de retorno de chamada como um parâmetro, no qual a operação específica de acessar o banco de dados é executada;
3. Execute a consulta através do método ExecutesQLtx.executesql (sqlquery, [value1, value2 ..], datahandler, errorHandler)
O método ExecutesQL possui quatro parâmetros e suas funções são as seguintes:
SQLQUERY: As instruções SQL que precisam ser executadas especificamente podem ser criar, selecionar, atualizar e excluir;
[Value1, Value2 ..]: Uma matriz de todos os parâmetros usados na instrução SQL. No método ExecutesQL, os parâmetros a serem usados na instrução SQL são substituídos? Primeiro, e então esses parâmetros são compostos de uma matriz por sua vez e colocados no segundo parâmetro;
Datahandler: a função de retorno de chamada que é chamada com sucesso, através da qual o conjunto de resultados da consulta pode ser obtido;
ErrorHandler: a função de retorno de chamada chamada quando a execução falha;
Este artigo usa o suporte ao banco de dados HTML5 para reimplementar o gerenciamento de livros de endereços no artigo anterior. As funções a serem implementadas são as seguintes:
Os contatos podem ser criados e salvos no banco de dados. Os campos de contato incluem: nome, número de telefone celular, empresa, tempo de criação;
Listar todas as informações de contato salvas atualmente;
Você pode excluir informações de contato específicas;
Da mesma forma, prepare uma página HTML primeiro, como segue :<! Doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<Title> HTML5 Local de armazenamento local banco de dados </title>
<estilo>
.Adddiv {
Border: 2px #ccc tracejado;
Largura: 400px;
Alinhamento de texto: centro;
}
</style>
</head>
<corpo onload = "loadall ()">
<div>
<Label para = "user_name"> Nome: </elabel>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<Label para = "Mobilephone"> Telefone celular: </elabel>
<input type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<Label para = "Mobilephone"> Company: </celt>
<input type = "text" id = "Company" name = "Company"/>
<br/>
<input type = "button" onclick = "save ()" value = "Add Record"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
A interface é exibida da seguinte forma:
Para implementar a função de criar um novo contato e armazená -lo no banco de dados, é necessário o seguinte código JS simples:
// Abra o banco de dados
var db = opendatabase ('contactDB', '', 'Demo de banco de dados local', 204800);
// salvar dados
função save () {
var user_name = document.getElementById ("user_name").
var mobilephone = document.getElementById ("mobilephone").
var Company = document.getElementById ("Company"). Valor;
// Tempo de criação
var time = new Date (). getTime ();
db.transaction (função (tx) {
tx.executesql ('inserir nos valores de contato (?,?,? ,?)', [user_name, mobilephone, empresa, tempo], onSuccess, oError);
});
}
// A função de retorno de chamada executada após a instrução SQL é executada com sucesso
função onsuccess (tx, rs) {
alerta ("Operação bem -sucedida");
loadall ();
}
// A função de retorno de chamada executada após a instrução SQL é executada falhando
função onError (tx, erro) {
alerta ("Operação falhou, falha na mensagem:"+ error.message);
}
Para exibir todas as listas de contatos salvas atualmente, você pode usar o seguinte código JS:
// Recupera todos os contatos armazenados no banco de dados SQLLITE
função loadall () {
var lista = document.getElementById ("list");
db.transaction (função (tx) {
// Se a tabela de dados não existir, crie uma tabela de dados
tx.executesql ('Criar tabela se não existe contato (texto de nome, texto do telefone, texto da empresa, inteiro createTime)', []);
// Verifique todos os registros de contato
tx.executesql ('selecione * de contato', [], função (tx, rs) {
if (rs.rows.length> 0) {
var resultado = "<table>";
resultado += "<tr> <th> número de série </th> <th> nome </th> <th> celular </th> <the> Empresa </th> <th> adicione tempo </th> <the> operação </th> </tr>";
for (var i = 0; i <rs.rows.length; i ++) {
var row = rs.rows.item (i);
// Converter tempo e saída de formato
var time = new Date ();
time.setTime (row.createTime);
var timeST = time.format ("yyyy-mm-dd hh: mm: ss");
// monta um nó de linha de uma tabela
Resultado+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>"+timeS+"</td> OnClick = 'del ("+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = resultado;
}outro{
list.innerhtml = "Os dados estão vazios, apresse -se e comece a adicionar contatos";
}
});
});
}
Entre eles, a função de formato envolvendo o tempo de formato pode ser referida como a seguinte implementação do JS :Date.prototype.format = function (formato)
{
var o = {
"M+": this.getmonth ()+1, // mês
"D+": this.getdate (), // dia
"h+": this.gethours (), // hora
"M+": this.getminutes (), // minuto
"S+": this.getSeconds (), // Segundo
"q+": math.floor ((this.getmonth ()+3)/3), // trimestre
"S": this.getMillisEconds () // milissegundos
}
if (/(y+)/. teste (formato)) formato = formato.preplace (regexp. $ 1,
(this.getlyear ()+""). substr (4 - regexp. $ 1.Length));
for (var k in O) if (new regexp ("(" + k + ")"). teste (formato))
formato = formato.Replace (regexp. $ 1,
Regexp. $ 1.Length == 1? OK] :
("00"+ o [k]). Substr ((""+ o [k]). Comprimento));
Formato de retorno;
}
Finalmente, o efeito de implementação da interface é o seguinte:
Para implementar um contato específico, você precisa executar o seguinte código JS :// Exclua as informações de contato
função del (telefone) {
db.transaction (função (tx) {
// Observe que o parâmetro passado no telefone precisa ser exibido aqui é convertido em tipo de string
tx.executesql ('exclua do contato onde telefone =?', [String (telefone)], Onsuccess, OnError);
});
}
Como no estilo da tabela na captura de tela acima, você pode consultar o seguinte código CSS :th {
Fonte: Bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Cor: #4F6B72;
Fronteira: 1px Solid #C1DAD7;
fundo de borda: 1px Solid #c1dad7;
Top de borda: 1px Solid #C1DAD7;
Espacamento de cartas: 2px;
TRANSFORMA DE TEXTO: OUPERCASE;
Alinhamento de texto: esquerda;
preenchimento: 6px 6px 6px 12px;
}
TD {
Fronteira: 1px Solid #C9DAD7;
fundo de borda: 1px Solid #C9DAD7;
Antecedentes: #ffff;
preenchimento: 6px 6px 6px 12px;
Cor: #4F6B72;
}