Im vorherigen Artikel "HTML5 Local Storage: Web Storage" wird kurz eingeführt, wie LocalStorage verwendet wird, um den lokalen Speicher zu implementieren. Tatsächlich unterstützt HTML5 neben SessionStorage und LocalStorage auch den lokalen Datenspeicher über lokale Datenbanken. HTML5 verwendet eine Datei-Datenbank wie SQLLite, die hauptsächlich auf eingebettete Geräte konzentriert ist. Schüler, die mit iOS/Android -Entwicklung vertraut sind, sollten mit SQLLite -Datenbanken vertraut sein.
Der Datenbankvorgang in HTML5 ist relativ einfach mit zwei Hauptfunktionen:
1. Erstellen Sie ein Objekt, um über die Opendatabase -Methode auf die Datenbank zugreifen zu könnenvar db = opendatabase (Datenbankname, Version, Beschreibung, Größe)
Diese Methode hat vier Parameter und ihre Funktionen sind:
Datenbankname: Datenbankname;
Version: Datenbankversionsnummer, keine Füllung;
Beschreibung: Datenbank Beschreibung;
Größe: Die Größe des für die Datenbank zugewiesenen Platzes;
2. Verwenden Sie das Datenbankzugriffsobjekt (z. B. DB), das im ersten Schritt erstellt wurde, um die Transaktionsmethode auszuführen, um die Transaktionsverarbeitung durchzuführendb.transaction (function (tx)) {
// Führen Sie die Anweisung aus, um auf die Datenbank zuzugreifen
});
Die Transaktionsmethode verwendet eine Rückruffunktion als Parameter, bei der der spezifische Betrieb des Zugriffs auf die Datenbank durchgeführt wird.
3. Führen Sie die Abfrage über die ExecutesQL -Methode austx.executesql (SQLQuery, [Value1, Value2 ..], Datahandler, ERRORHANDLER)
Die ExecutesQL -Methode hat vier Parameter, und ihre Funktionen sind wie folgt:
SQLQuery: Die SQL -Anweisungen, die speziell ausgeführt werden müssen, können erstellt, auswählen, aktualisieren und löschen.
[value1, value2 ..]: Ein Array aller in der SQL -Anweisung verwendeten Parameter. In der ExecutesQL -Methode werden die Parameter in der SQL -Anweisung ersetzt? Zuerst bestehen diese Parameter aus einem Array und in den zweiten Parameter platziert;
Datahandler: Die Rückruffunktion, die erfolgreich aufgerufen wird, durch die der Abfrageergebnissatz erhalten werden kann;
ERRORHANDLER: Die Rückruffunktion, die bei fehlgeschlagener Ausführung aufgerufen wird.
In diesem Artikel wird die HTML5-Datenbankunterstützung verwendet, um die Adressbuchverwaltung im vorherigen Artikel erneut zu implementieren. Die zu implementierten Funktionen sind wie folgt:
Kontakte können erstellt und in der Datenbank gespeichert werden. Zu den Kontaktfeldern gehören: Name, Mobiltelefonnummer, Firma, Erstellungszeit;
Listen Sie alle derzeit gespeicherten Kontaktinformationen auf.
Sie können bestimmte Kontaktinformationen löschen.
Bereiten Sie in ähnlicher Weise zuerst eine HTML -Seite vor, wie folgt :<! DocType html>
<html>
<kopf>
<meta charset = "utf-8"/>
<titels> HTML5 Lokaler Speicher Lokaler Datenbank </title>
<Styles>
.adddiv {
Grenze: 2PX gestrichelt #CCC;
Breite: 400px;
Text-Align: Mitte;
}
</style>
</head>
<body onload = "loadAll ()">
<div>
<Label für = "user_name"> name: </label>
<Eingabe type = "text" id = "user_name" name = "user_name"/>
<br/>
<Label für = "MobilePhone"> Mobiltelefon: </label>
<Eingabe type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<Label für = "MobilePhone"> Firma: </label>
<Eingabe type = "text" id = "company" name = "company"/>
<br/>
<Eingabe type = "Taste" Onclick = "Save ()" value = "Record"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
Die Schnittstelle wird wie folgt angezeigt:
Um die Funktion zum Erstellen eines neuen Kontakts zu implementieren und in der Datenbank zu speichern, ist der folgende einfache JS -Code erforderlich:
// Öffnen Sie die Datenbank
var db = opendatabase ('contactdb', '', 'Local Database Demo', 204800);
// Daten speichern
Funktion Save () {
var user_name = document.getElementById ("user_name"). Wert;
var mobilephone = document.getElementById ("Mobilephone"). Wert;
var Company = document.getElementById ("Company"). Wert;
// Erstellungszeit
var time = new Date (). GetTime ();
db.transaction (Funktion (tx) {
tx.executesql ('In Kontaktwerte einfügen (?,?,?,?), [User_name, MobilePhone, Firma, Zeit], OnSuccess, OnError);
});
}
// Die Rückruffunktion, die nach der erfolgreichen Ausführung der SQL -Anweisung ausgeführt wurde
Funktion OnSuccess (tx, rs) {
Alert ("Operation erfolgreich");
loadAll ();
}
// Die Rückruffunktion, die nach der Ausführung der SQL -Anweisung ausgeführt wurde
Funktion onError (TX, Fehler) {
ALERT ("Operation fehlgeschlagen, fehlgeschlagene Nachricht:"+ error.message);
}
Um alle aktuell gespeicherten Kontaktlisten anzuzeigen, können Sie den folgenden JS -Code verwenden:
// Alle in der SQLLite -Datenbank gespeicherten Kontakte abrufen
Funktion loadAll () {
var list = document.getElementById ("list");
db.transaction (Funktion (tx) {
// Wenn die Datentabelle nicht vorhanden ist, erstellen Sie eine Datentabelle
tx.executesql ('Tabelle erstellen, wenn nicht existiert, Kontakt (Name Text, Telefontext, Firmentext, CreateTime Integer)', []);
// alle Kontaktdatensätze überprüfen
tx.executesql ('select * from contact', [], function (tx, rs) {
if (rs.rows.length> 0) {
var result = "<table>";
Ergebnis += "<tr> <th> Seriennummer </th> <Th> Name </th> <Th> Mobile </th> <Th> Firma </th> <th> Zeit add </th> <th> Betrieb </th> </tr>";
für (var i = 0; i <rsrows.length; i ++) {
var row = rs.rows.item (i);
// Zeit- und Formatausgabe konvertieren
var time = new Date ();
time.settime (row.createTime);
var timestr = time.format ("yyyy-mm-dd hh: mm: ss");
// einen Zeilenknoten einer Tabelle zusammenstellen
Ergebnis+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>"+Timestret+"</td> <td> <td> <typs onclick = 'del ("+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = Ergebnis;
}anders{
list.innerhtml = "Die Daten sind derzeit leer, beeilen Sie sich und fügen Sie Kontakte hinzu";
}
});
});
}
Unter ihnen kann die Formatfunktion mit Formatzeit als folgende JS -Implementierung bezeichnet werden :Datum.Prototype.format = Funktion (Format)
{
var o = {
"M+": this.getMonth ()+1, // Monat
"D+": this.getDate (), // Tag
"H+": this.gethours (), // stunde
"M+": this.getminutes (), // Minute
"S+": this.getSeconds (), // Sekunde
"q+": math.floor ((this.getMonth ()+3)/3), // Quarter
"S": this.getMilliseconds () // Millisekunden
}
if (/(y+)/. test (format)) format = format.replace (regexp. $ 1,
(this.getingfullyear ()+""). substr (4 - regexp. $ 1.länge));
für (var k in o) if (neuer regexp ("(" + k + ")"). Test (Format))
format = format.replace (regexp. $ 1,
Regexp. $ 1.Length == 1? OK] :
("00"+ o [k]). Substr ((""+ o [k]). Länge));
Rückgabeformat;
}
Schließlich lautet der Implementierungseffekt der Schnittstelle wie folgt:
Um einen bestimmten Kontakt zu implementieren, müssen Sie den folgenden JS -Code ausführen :// die Kontaktinformationen löschen
Funktion del (Telefon) {
db.transaction (Funktion (tx) {
// Beachten Sie, dass der hier übergebene Parameter hier angezeigt werden muss
tx.executesql ('aus dem Kontakt löschen Where Telefon =?', [String (Telefon)], OnSuccess, OnError);
});
}
Wie im Tabellenstil im obigen Screenshot können Sie den folgenden CSS -Code verweisen :th {
Schriftart: BOLD 11PX "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Farbe: #4f6b72;
Grenzrechte: 1PX Solid #C1DAD7;
Border-Bottom: 1PX Solid #C1DAD7;
Border-Top: 1PX Solid #C1DAD7;
Buchstabenabteilung: 2px;
Texttransformierung: Großbuchstaben;
Text-Align: links;
Polsterung: 6PX 6PX 6PX 12px;
}
td {
Grenzrechte: 1PX Solid #C9DAD7;
Border-Bottom: 1PX Solid #C9DAD7;
Hintergrund: #ffff;
Polsterung: 6PX 6PX 6PX 12px;
Farbe: #4f6b72;
}