suchen

Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Datenbankspeicheranwendung von HTML5 Local Storage_HTML5-Tutorial-Fähigkeiten

Einführung in die Datenbankspeicheranwendung von HTML5 Local Storage_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:50:341780Durchsuche

Im vorherigen Artikel „Web Storage of HTML5 Local Storage“ haben wir kurz vorgestellt, wie man localStorage verwendet, um lokalen Speicher zu erreichen. Tatsächlich unterstützt HTML5 zusätzlich zu sessionStorage und localStorage auch die lokale Datenspeicherung über lokale Datenbanken HTML5 verwendet eine Dateityp-Datenbank wie „SQLLite“, die sich hauptsächlich auf eingebettete Geräte konzentriert. Schüler, die mit der IOS/Android-Entwicklung vertraut sind, sollten mit der SQLLite-Datenbank vertraut sein.
Datenbankoperationen in HTML5 sind relativ einfach und umfassen hauptsächlich die folgenden zwei Funktionen:
1. Erstellen Sie ein Objekt für den Zugriff auf die Datenbank über die openDatabase-Methode

Kopieren Sie den Code
Der Code lautet wie folgt:

var db = openDatabase(databasename,version,description,size)

Diese Methode hat vier Parameter, ihre Funktionen sind:
Datenbankname: Datenbankname;
Beschreibung: Datenbankbeschreibung;
Größe: Speicherplatz für die Datenbankgröße zugewiesen;

2. Verwenden Sie das im ersten Schritt erstellte Datenbankzugriffsobjekt (z. B. db), um die Transaktionsverarbeitung auszuführen

Code kopierenDer Code lautet wie folgt:
db.transaction(function(tx)){
// Führen Sie die Anweisung aus, um auf die Datenbank zuzugreifen
} ; >



Code kopieren
Der Code lautet wie folgt:

tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler)
Die MethodeexecuteSql hat vier Parameter und ihre Funktionen sind wie folgt: sqlQuery: Die SQL-Anweisung, die speziell ausgeführt werden muss, kann sein: Erstellen, Auswählen, Aktualisieren, Löschen.: Ein Array aller in der SQL-Anweisung verwendeten Parameter, zuerst ersetzen Geben Sie die in der SQL-Anweisung zu verwendenden Parameter mit „?“ ein und fügen Sie diese Parameter dann der Reihe nach in ein Array ein. Im zweiten Parameter wird die Rückruffunktion aufgerufen, wenn die Abfrage erfolgreich ist set kann abgerufen werden; errorHandler: Die Rückruffunktion wird aufgerufen, wenn die Ausführung fehlschlägt.
Dieser Artikel wird von der Datenbank von HTML5 unterstützt. Die im vorherigen Artikel implementierten Funktionen sind wie folgt:
Kontakte können in der Datenbank erstellt und gespeichert werden: Name, Mobiltelefonnummer, Firma, Erstellungszeit;
Alle aktuell gespeicherten Kontaktinformationen löschen ;

Bereiten Sie auf ähnliche Weise zuerst eine HTML-Seite vor
:





Code kopieren


Der Code lautet wie folgt:
;
HTML5 lokaler Datenbankartikel >text-align:center;
"addDiv">




Die Funktion erfordert den folgenden einfachen JS-Code:





Kopieren Sie den Code


Der Code lautet wie folgt:

//Datenbank öffnen
var db = openDatabase('contactdb','','local database',204800)
//Daten speichern
function save());
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value ;
//Erstellungszeit
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact value(?, ? ,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
}
//Die Rückruffunktion wird ausgeführt, nachdem die SQL-Anweisung erfolgreich ausgeführt wurde
function onSuccess(tx,rs){
alert("Vorgang erfolgreich");
loadAll();
}
//Die Rückruffunktion, die ausgeführt wird, nachdem die SQL-Anweisung fehlgeschlagen ist
function onError(tx ,error){
alert("Vorgang fehlgeschlagen, Fehlermeldung: "
}

Um alle aktuell gespeicherten Kontaktlisten anzuzeigen, können Sie Verwenden Sie die folgende JS-Code-Implementierung:


Code kopieren Der Code lautet wie folgt:
//Alles speichern in Alle Kontakte in der SQLLite-Datenbank abrufen
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//if Wenn die Datentabelle nicht existiert, erstellen Sie die Datentabelle
tx.executeSql('create table if not exist contact(name text,phone text,company text,createtime INTEGER)',[]);
//Alle Kontakte abfragen Personendatensatz
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "result = "SeriennummerNameMobiltelefon Company< /th>Zeit hinzufügenOperation";
for(var i=0;ivar row = rs.rows.item(i);
//Konvertieren Sie die Zeit und formatieren Sie die Ausgabe
var time = new Date(
time.setTime(); row.createtime );
var timeStr = time.format("yyyy-MM-dd hh:mm:ss");/Füge die Zeilenknoten einer Tabelle zusammen
result = "" row.name "" row.phone "" row .company "< ;/td>" timeStr "< /td>";
}
list.innerHTML = result;
}else{
list.innerHTML = "Die Daten sind derzeit leer, beginnen Sie mit dem Hinzufügen von Kontakten schnell";
}
});
});
}


Unter diesen kann die Formatierungsfunktion mit Formatierungszeit in Bezug auf implementiert werden das folgende JS
:

Code kopieren Der Code lautet wie folgt:
Date.prototype.format = function (format)
{
var o = {
"M " : this.getMonth() 1, //month
"d " : this.getDate( ), //Tag
„h“ : this.getHours(), //Stunde
“m“ : this.getMinutes(), //Minute
“s“ : this.getSeconds(), //second
"q " : Math.floor((this.getMonth() 3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y )/ .test(format)) format=format.replace(RegExp.$1,
(this.getFullYear() "").substr(4 - RegExp.$1.length)); 🎜>for(var k in o )if(new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length= =1 ? o[k] :
("00" o[k]).substr(("" o[k]).length)); 🎜>
Schließlich ist die Schnittstelle Der Implementierungseffekt ist wie folgt:



Um einen bestimmten Kontakt zu implementieren, müssen Sie den folgenden JS-Code ausführen
:



Code kopieren

Der Code lautet wie folgt:
//Kontaktinformationen löschenFunktion del (phone){ db.transaction(function(tx) { //Beachten Sie, dass hier gezeigt werden muss, dass der eingehende Parameter phone in einen String-Typ konvertiert werden muss
tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError) ;
}



Für den Tabellenstil im obigen Screenshot: Bitte beachten Sie den folgenden CSS-Code
:




Code kopieren
代码如下:

th {
Schriftart: fett 11px „Trebuchet MS“, Verdana, Arial, Helvetica, serifenlos;
Farbe: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1 Pixel durchgehend #C1DAD7;
Buchstabenabstand: 2px;
Texttransformation: Großbuchstaben;
Textausrichtung: links;
Auffüllung: 6px 6px 6px 12px;
}
td {
border-right: 1px solid #C9DAD7;
border-bottom: 1px solid #C9DAD7;
Hintergrund: #fff;
Auffüllung: 6px 6px 6px 12px;
Farbe: #4f6b72;
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Durchbrechen Sie die Einschränkungen der Canvas-Syntax und unterstützen Sie die Tutorialfähigkeiten der Kettensyntax_html5Nächster Artikel：Durchbrechen Sie die Einschränkungen der Canvas-Syntax und unterstützen Sie die Tutorialfähigkeiten der Kettensyntax_html5

In Verbindung stehende Artikel

Mehr sehen