En el artículo anterior "Almacenamiento local HTML5: almacenamiento web", presenta brevemente cómo usar LocalStorage para implementar el almacenamiento local; De hecho, además de SessionStorage y LocalStorage, HTML5 también admite el almacenamiento de datos locales a través de bases de datos locales. HTML5 utiliza una base de datos de tipo archivo como SQLLITE, que se concentra principalmente en dispositivos incrustados. Los estudiantes que están familiarizados con el desarrollo de iOS/Android deben estar familiarizados con las bases de datos SQLLITE.
La operación de la base de datos en HTML5 es relativamente simple, con dos funciones principales:
1. Cree un objeto para acceder a la base de datos a través del método OpenDatabasevar db = OpenDatabase (DataBAsename, Versión, Descripción, Tamaño)
Este método tiene cuatro parámetros, y sus funciones son:
DataBASEname: Nombre de la base de datos;
Versión: Número de versión de la base de datos, sin relleno;
Descripción: Descripción de la base de datos;
Tamaño: el tamaño del espacio asignado a la base de datos;
2. Use el objeto de acceso a la base de datos (como DB) creado en el primer paso para ejecutar el método de transacción para realizar el procesamiento de transaccionesdb.transaction (function (tx)) {
// Ejecutar la declaración para acceder a la base de datos
});
El método de transacción utiliza una función de devolución de llamada como un parámetro, en el que se realiza la operación específica de acceder a la base de datos;
3. Ejecutar consulta a través del método Executesqltx.executesql (sqlQuery, [value1, value2 ..], datahandler, errorhandler)
El método ExecutesQL tiene cuatro parámetros, y sus funciones son las siguientes:
SQLQuery: las declaraciones SQL que deben ejecutarse específicamente se pueden crear, seleccionar, actualizar y eliminar;
[Value1, Value2 ..]: Una matriz de todos los parámetros utilizados en la instrucción SQL. En el método ExecutesQL, los parámetros que se utilizarán en la instrucción SQL se reemplazan con? Primero, y luego estos parámetros están compuestos de una matriz a su vez y se colocan en el segundo parámetro;
Datahandler: la función de devolución de llamada que se llama correctamente, a través de la cual se puede obtener el conjunto de resultados de la consulta;
ErrorHandler: la función de devolución de llamada llamada cuando la ejecución falla;
Este artículo utiliza soporte de base de datos HTML5 para volver a implementar la gestión de la libreta de direcciones en el artículo anterior. Las funciones a implementar son las siguientes:
Los contactos se pueden crear y guardar en la base de datos. Los campos de contacto incluyen: nombre, número de teléfono móvil, empresa, tiempo de creación;
Lista toda la información de contacto guardada actualmente;
Puede eliminar información de contacto específica;
Del mismo modo, prepare una página HTML primero, como sigue :<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8"/>
<title> html5 almacenamiento local de la base de datos local </title>
<estilo>
.adddiv {
Border: 2px Dable #CCC;
Ancho: 400px;
Text-Align: Center;
}
</style>
</ablo>
<Body Onload = "LoadAll ()">
<div>
<etiqueta for = "user_name"> Nombre: </seleting>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<etiqueta for = "mobilePhone"> Teléfono móvil: </etiqueta>
<input type = "text" id = "mobilePhone" name = "mobilePhone"/>
<br/>
<etiqueta for = "mobilePhone"> Company: </selabel>
<input type = "text" id = "Company" name = "Company"/>
<br/>
<input type = "button" onClick = "save ()" value = "Agregar registro"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
La interfaz se muestra de la siguiente manera:
Para implementar la función de crear un nuevo contacto y almacenarlo en la base de datos, se requiere el siguiente código JS simple:
// Abra la base de datos
var db = opendatabase ('ContactDb', '', 'Demo de la base de datos local', 204800);
// Guardar datos
function save () {
var user_name = document.getElementById ("user_name"). valor;
var mobilePhone = document.getElementById ("mobilePhone"). valor;
Var Company = document.getElementById ("Company"). Valor;
// Tiempo de creación
var tiempo = nueva fecha (). getTime ();
db.transaction (function (tx) {
tx.executesql ('insertar en valores de contacto (?,?,?,?)', [user_name, mobilePhone, compañía, tiempo], onSuccess, onError);
});
}
// La función de devolución de llamada ejecutada después de que la instrucción SQL se ejecute correctamente
function onSuccess (tx, rs) {
alerta ("Operación exitosa");
loadAll ();
}
// La función de devolución de llamada ejecutada después de que se ejecuta la instrucción SQL falló
función onError (tx, error) {
alerta ("Operación fallida, mensaje fallido:"+ error.message);
}
Para mostrar todas las listas de contactos guardadas actualmente, puede usar el siguiente código JS:
// recuperar todos los contactos almacenados en la base de datos SQLLITE
función loadAll () {
var list = document.getElementById ("List");
db.transaction (function (tx) {
// Si la tabla de datos no existe, cree una tabla de datos
tx.executesql ('Crear tabla si no existe contacto (texto de nombre, texto del teléfono, texto de la empresa, Integer de CreateTime)', []);
// Verifique todos los registros de contacto
tx.executesql ('select * from contact', [], function (tx, rs) {
if (rs.rows.length> 0) {
VAR result = "<Blood>";
Result += "<tr> <th> número de serie </th> <th> name </th> <th> mobile </th> <th> compañía </th> <th> Agregar tiempo </th> <th> operación </th> </tr>";
para (var i = 0; i <rs.rows.length; i ++) {
var fila = rs.Rows.Item (i);
// Convertir la salida de tiempo y formato
VAR TIME = new Date ();
TIME.SETTIME (Row.CreateTime);
var timestr = time.format ("aaa-mm-dd hh: mm: ss");
// ensamblar un nodo de fila de una tabla
Result+= "<tr> <td>"+(i+1)+"</td> <td>"+fila.name+"</td> <td>"+fila onClick = 'del ("+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = resultado;
}demás{
list.innerhtml = "Los datos están actualmente vacíos, date prisa y comienzan a agregar contactos";
}
});
});
}
Entre ellos, la función de formato que involucra el tiempo de formato puede denominarse la siguiente implementación JS :Date.prototype.format = function (formato)
{
var o = {
"M+": this.getMonth ()+1, // mes
"D+": this.getDate (), // Day
"H+": this.gethours (), // hora
"M+": this.getminutes (), // minuto
"S+": this.getSeconds (), // segundo
"Q+": Math.floor ((this.getMonth ()+3)/3), // trimestre
"S": this.getMilliseConds () // milisegundo
}
if (/(y+)/. test (format)) format = format.replace (regexp. $ 1,
(this.getblyar ()+""). Substr (4 - Regexp. $ 1.Length));
para (var k en o) if (nuevo regexp ("(" + k + ")"). Test (formato)))
format = format.replace (regexp. $ 1,
Regexp. $ 1.length == 1? OK] :
("00"+ o [k]). Substr ((""+ o [k]). Longitud));
formato de retorno;
}
Finalmente, el efecto de implementación de la interfaz es el siguiente:
Para implementar un contacto específico, debe ejecutar el siguiente código JS :// Eliminar la información de contacto
función del (teléfono) {
db.transaction (function (tx) {
// Tenga en cuenta que el parámetro pasado en el teléfono debe mostrarse aquí se convierte en tipo de cadena
tx.Executesql ('Eliminar desde el contacto donde el teléfono =?', [String (teléfono)], OnSuccess, OnError);
});
}
Como en el estilo de la tabla en la captura de pantalla anterior, puede consultar el siguiente código CSS :th {
Font: Bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Color: #4f6b72;
Border-Right: 1px Solid #C1Dad7;
Border-Bottom: 1px Solid #C1Dad7;
Border-Top: 1px Solid #C1DAD7;
espaciado de letras: 2px;
Texto-transformación: upcase;
text-align: izquierda;
relleno: 6px 6px 6px 12px;
}
TD {
Border-Right: 1px Solid #C9Dad7;
Border-Bottom: 1px Solid #C9Dad7;
Antecedentes: #ffff;
relleno: 6px 6px 6px 12px;
Color: #4f6b72;
}