Heim  >  Artikel  >  Web-Frontend  >  Lernzusammenfassung von Web SQL in HTML5

Lernzusammenfassung von Web SQL in HTML5

青灯夜游
青灯夜游nach vorne
2018-11-13 09:35:233244Durchsuche

Der Inhalt dieses Artikels besteht darin, die Zusammenfassung des Web SQL-Lernens von HTML5 vorzustellen, damit jeder einige verwandte Kenntnisse über Web SQL verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

In Websystemen oder Anwendungen ist es oft notwendig, einige Daten lokal zu speichern. Die früheste Möglichkeit, Daten auf dem Client zu speichern, war Cookie (natürlich werden Cookies hauptsächlich zum Speichern verwendet). Benutzerstatus. Sie können in Ihrer Freizeit einige Arbeiten zum Speichern lokaler Daten durchführen, aber tatsächlich ist es nicht zum Speichern lokaler Daten des Clients geeignet. Es gibt mehrere Gründe:

Alle Wenn der Server angefordert wird, erhöht sich der unnötige Verkehrsverbrauch, da jedes Mal, wenn der Server angefordert wird, ein Cookie an den Server gesendet wird.

2. Die Regeln zur Cookie-Datenspeicherung sind nicht so einfach anzuwenden und die Struktur ist nicht klar genug.

3. Der wichtigste Punkt ist, dass die Speicherkapazität von Cookies extrem gering ist. Die Länge jedes Cookies darf 4 KB nicht überschreiten offensichtlich nicht genug.

Mit der Entwicklung von HTML5 tauchten später localStorage und sessionStorage auf:

localStorage: permanenter Speicher, egal wie lange es dauert, ihn einzugeben Seite oder Seiten erneut Die gespeicherten Daten können von der Site abgerufen werden, auf der sie sich befinden (können mit der Methode „clearI“ oder „removeItem“ gelöscht werden).

sessionStorage: Temporäre Speicherung, die gespeicherten Daten werden automatisch gelöscht, wenn die Seite geschlossen wird.

Tatsächlich werden diese beiden Objekte beim Arbeiten oder Entwickeln eigener Projekte am häufigsten verwendet. Zumindest im Moment können diese beiden Objekte noch den lokalen Speicherbedarf der meisten Projekte decken, obwohl die Speicherstruktur noch vorhanden ist Die Abfrage lokal gespeicherter Daten ist immer noch zu einfach.

Nun hauptsächlich um es zusammenzufassen:

Die neue API in HTML5 -->Web Sql lokale Datenbanktechnologie, die Web Sql-Datenbank-API ist eigentlich kein Teil der HTML5-Spezifikation, sondern eine An Durch die unabhängige Spezifikation kann die im Wesentlichen mit der SQL-Sprache konsistente Syntax zum Hinzufügen, Löschen, Ändern und Abfragen der lokalen Datenbank verwendet werden, sodass Entwickler mit Back-End-Entwicklungserfahrung problemlos beginnen können (es sollte darauf hingewiesen werden, dass HTML5 das Web aufgegeben hat). Die Arbeit an dieser Spezifikation wurde eingestellt und wird dennoch grundsätzlich von den meisten Browsern unterstützt. Lassen Sie uns nun seine Verwendung vorstellen:

Erstellen Sie eine WebSql-Datenbank:

openDatabase(数据库名,数据库版本号,描述,数据库大小,数据库创建成功的回调);
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调,可省略
});

Hinweis: Diese Methode gibt ein Datenbankzugriffsobjekt zurück, wenn die Datenbank erstellt wird bereits existiert, öffnet diese Methode direkt die Datenbank.

Eine Transaktion erstellen:

mydb.transaction(function(tx){
    //该方法有一个事务对象参数供使用,该对象上有一系列为数据库增删改查的方法。
});

Eine Operation ausführen:

tx.executeSql(执行数据库操作的sql语句,参数,数据库操作执行成功的回调,数据库操作执行失败的回调);

Spezifische Datenbankoperationen:

Erstellen Sie eine Datentabelle:

tx.executeSql('create table if not exists table1 (id unique,name)', [], function(tx, result) { 
	//成功回调
	},function(error){
         //失败回调
	});

Hinweis: Die Bedeutung dieser Aussage besteht darin, eine Datentabelle Tabelle1 zu erstellen. Wenn diese Tabelle nicht in der Datenbank vorhanden ist und der Anweisung nicht „falls nicht vorhanden“ hinzugefügt wird, wird ein Fehler gemeldet, wenn die Datentabelle, die Sie erstellen möchten, bereits in der Datenbank vorhanden ist.

Eine Datentabelle löschen:

tx.exexcteSql('drop table table1',[],function(tx,result){
      //删除成功时的回调
      },function(error){ 
         //删除失败时的回调
      });

Ein Datenelement zur Datentabelle hinzufügen:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            },function(error){
                  //添加数据失败时的回调
            });

Löschen Sie ein oder mehrere Datenelemente in der Datentabelle:

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

oder:

tx.executeSql('delete from table1 where id=?',[1],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});

Aktualisieren Sie ein Datenelement in der Datenbanktabelle:   

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   },function(error){
       //数据更新失败时的回调
   });

Fragen Sie die Daten ab, die die Abfragebedingungen erfüllen:  

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
},function(error){
  //查询失败时的回调
});

Hinweis: Wenn die Abfrage erfolgreich ist, können Sie die von der Abfrage zurückgegebenen Daten über verwenden das rows-Attribut des Ergebnisparameters in der Callback-Funktion.

Dieses Beispiel ist nur die einfachste Abfrageanweisung. Wenn Sie komplexere Abfragen benötigen, können Sie auf die SQL-Anweisung zurückgreifen.

Zusammenfassung:

Um es kurz zusammenzufassen: Tatsächlich ist diese Datenbank-API relativ einfach Erstellen einer Transaktion. Führen Sie alle Vorgänge für das Transaktionsobjekt aus. Derzeit unterstützt die API nicht das Löschen der gesamten Datenbank, aber wir können die Datenbank löschen, indem wir alle Datentabellen in dieser Datenbank löschen, um einen ähnlichen Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonLernzusammenfassung von Web SQL in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen