suchen

Heim >Web-Frontend >H5-Tutorial >Analysieren Sie die Speicherfunktion von HTML5 und die damit verbundenen Betriebsmethoden der Web-SQL_html5-Tutorialfähigkeiten

Analysieren Sie die Speicherfunktion von HTML5 und die damit verbundenen Betriebsmethoden der Web-SQL_html5-Tutorialfähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:45:551397Durchsuche

HTML5 führt zwei Mechanismen ein, ähnlich wie HTTP-Sitzungscookies, um strukturierte Daten auf der Clientseite zu speichern und die folgenden Mängel zu überwinden.

In jeder HTTP-Anfrage sind Cookies enthalten, die dazu führen, dass die Übertragung derselben Daten unsere Webanwendung verlangsamt.

Cookies sind in jeder HTTP-Anfrage enthalten, was dazu führt, dass Daten unverschlüsselt über das Internet gesendet werden.

Cookies können nur begrenzte 4 KB an Daten speichern, was nicht ausreicht, um die erforderlichen Daten zu speichern.
Die beiden Speichermethoden sind Sitzungsspeicher und lokaler Speicher, die zur Bewältigung unterschiedlicher Situationen verwendet werden.

Fast alle aktuellen Browser unterstützen HTML5-Speicher, einschließlich Internet Explorer.

Sitzungsspeicherung
_Sitzungsspeicherung_ ist für Szenarien konzipiert, in denen Benutzer eine einzelne Transaktion durchführen, mehrere Transaktionen jedoch gleichzeitig in verschiedenen Fenstern ausgeführt werden können.

Beispiel

Zum Beispiel, wenn ein Benutzer ein Flugticket in zwei verschiedenen Fenstern auf derselben Website kauft. Wenn die Website Cookies verwendet, um die von einem Benutzer gekauften Tickets zu verfolgen, werden die aktuell gekauften Tickets „durchgesickert“, wenn der Benutzer von einem Fenster zum anderen wechselt, während er durch die Seite klickt, was dazu führen kann, dass der Benutzer zwei Tickets dafür kauft Gleicher Flug ohne es zu bemerken.

HTML5 hat das sessionStorage-Attribut eingeführt, mit dem Daten zum Sitzungsspeicher hinzugefügt werden können. Der Benutzer kann weiterhin auf jede Seite derselben Website im geöffneten Fenster zugreifen, wenn die Sitzung geschlossen ist auch verloren.

Der folgende Code legt eine Sitzungsvariable fest und greift dann auf die Variable zu:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Körper>
  5. <script type="text/ Javascript">
  6. if( sessionStorage.hits ){
  7. sessionStorage.hits = Nummer(sessionStorage.hits) 1;
  8. }else{
  9. sessionStorage.hits = 1;
  10. }
  11. document.write("Total Hits:" sessionStorage.hits);
  12. Skript>
  13. <p>Aktualisieren Sie die Seite, um die Anzahl der Treffer zu erhöhen. p> 
  14. <p>Schließen Sie das Fenster und öffnen Sie es erneut und überprüfen Sie das Ergebnis. p>
  16. Körper>
  17. html>

Lokaler Speicher
_Lokaler Speicher_ ist für die Speicherung über mehrere Fenster hinweg konzipiert und bleibt in der aktuellen Sitzung bestehen. Insbesondere Webanwendungen möchten aus Leistungsgründen möglicherweise Millionen Bytes an Benutzerdaten auf dem Client speichern, beispielsweise ganze von einem Benutzer geschriebene Dokumente oder das Postfach eines Benutzers.

Cookies bewältigen diese Situation nicht besonders gut, da sie bei jeder Anfrage übertragen werden.

Beispiel

HTML5 hat das Attribut localStorage eingeführt, mit dem ohne zeitliche Begrenzung auf den lokalen Speicherbereich der Seite zugegriffen werden kann. Lokaler Speicher ist verfügbar, wann immer wir diese Seite verwenden.

Der folgende Code legt eine lokale Speichervariable fest, auf die bei jedem Zugriff auf diese Seite zugegriffen werden kann, auch beim nächsten Öffnen des Fensters:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Körper>
  5. <script type="text/ Javascript">
  6. if( localStorage.hits){
  7. localStorage.hits = Nummer(localStorage.hits) 1;
  8. }else{
  9. localStorage.hits = 1;
  10. }
  11. document.write("Total Hits:" localStorage.hits);
  12. Skript>
  13. <p>Aktualisieren Sie die Seite, um die Anzahl der Treffer zu erhöhen. p> 
  14. <p>Schließen Sie das Fenster und öffnen Sie es erneut und überprüfen Sie das Ergebnis. p>
  16. Körper>
  17. html>
Die oben genannten Konzepte sind leicht zu erlernen – bitte üben Sie online.

Webspeicher löschen

Das Speichern vertraulicher Daten auf Ihrem lokalen Computer kann gefährlich sein und Sicherheitslücken hinterlassen.
_Sitzungsgespeicherte Daten_ werden vom Browser sofort nach Beendigung der Sitzung gelöscht.

Um die lokalen Speichereinstellungen zu löschen, müssen Sie localStorage.remove('key') aufrufen; dieser 'key' ist der Schlüssel, der dem Wert entspricht, den wir entfernen möchten. Wenn Sie alle Einstellungen löschen möchten, müssen Sie die Methode localStorage.clear() aufrufen.

Der folgende Code löscht den lokalen Speicher vollständig:

XML/HTML-Code
Inhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3. <Körper>  
  4.   
  5.   <script type="text/ Javascript">  
  6.     localStorage.clear();   
  7.   
  8.     // Anzahl der Treffer zurücksetzen.   
  9.     if( localStorage.hits ){   
  10.        localStorage.hits = Nummer(localStorage.hits)  1;   
  11.     }sonst{   
  12.        localStorage.hits = 1;   
  13.     }   
  14.     document.write("Total Hits :"   localStorage.hits );   
  15.   Skript>  
  16.   <p>Durch das Aktualisieren der Seite würde sich der Trefferzähler nicht erhöhen.p>  
  17.   <p>Schließen Sie das Fenster, öffnen Sie es erneut und überprüfen Sie das Ergebnis. p>  
  18.   
  19. Körper>  
  20. html>  

Web SQL-API
Web SQL-API für HTML5 Die Verwendung von SQL-APIs ist nicht möglich.
核心方法 openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象.
transaction：这个方法以及基于这种情况执行提交或者回滚.executeSql :这个方法用于执行实际的 SQL 查询.

开启数据库

如果数据库已经存在，openDatabase 方法负责开启数据库，如果不存在，这个方法会创建它.

使用下面的代码可以创建并开启一个数据库:

JavaScript-Code

复制内容到剪贴板
var
  1.  db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

    Die obige Methode akzeptiert die folgenden fünf Parameter:

    Datenbankname
    Versionsnummer
    Beschreibungstext
    Datenbankgröße
    Erstellungsrückruf
    Der letzte und fünfte Parameter, der Erstellungsrückruf, wird aufgerufen, nachdem die Datenbank erstellt wurde. Aber auch ohne diese Funktion erstellt die Laufzeitumgebung die Datenbank und die richtige Version.

    Abfrage ausführen
    Um die Abfrage auszuführen, müssen Sie die Funktion „database.transaction()“ verwenden. Diese Funktion benötigt einen Parameter, eine Funktion, die für die tatsächliche Ausführung der Abfrage verantwortlich ist, wie unten gezeigt:

    JavaScript-CodeInhalt in die Zwischenablage kopieren
    1. var db = openDatabase('mydb', '1.0', 'Test-DB', 2 * 1024 * 1024); db.transaction(
    2. function (tx) { tx.executeSql(
    3. 'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });
    Die obige Abfrageanweisung erstellt eine Tabelle namens LOGS in der Datenbank „mydb“.

    Einfügeoperation

    Um einen Eintrag in der Tabelle zu erstellen, fügen wir dem obigen Beispiel eine einfache SQL-Abfrage wie folgt hinzu:

    JavaScript-Code
    Inhalt in die Zwischenablage kopieren
      var
    1. db = openDatabase('mydb', '1.0', 'Test-DB', 2 * 1024 * 1024); db.transaction(function
      2. (tx) {
    2. tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'
      3. );
    3. tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'
      4. );
    4. tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
      5. });
    5. Sie können beim Erstellen eines Eintrags auch dynamische Werte wie diesen übergeben:
    6. JavaScript-Code
      7. Inhalt in die Zwischenablage kopieren

    var db = openDatabase('mydb'
    ,
    1. '1.0', 'Test-DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'
    2. ); tx.executeSql('INSERT INTO LOGS
    3. (id,log) VALUES (?, ?'), [e_id, e_log];
      4. });

    4. Hier sind e_id und e_log externe Variablen.executeSql ordnet jeden Eintrag im Array-Parameter „?“ zu.

      Lesevorgang
      Um einen bereits vorhandenen Datensatz zu lesen, können wir einen Callback verwenden, um das Ergebnis wie folgt zu erfassen:

      JavaScript-CodeInhalt in die Zwischenablage kopieren
      1. var db = openDatabase('mydb', '1.0', 'Test-DB', 2 * 1024 * 1024); db.transaction(
      2. function (tx) { tx.executeSql(
      3. 'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql(
      4. 'INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'
      5. ); }); db.transaction(
      6. function (tx) {
      7. tx.executeSql('SELECT * FROM LOGS', [],
      8. function (tx, results) { var len = results.rows.length, i;
      9. msg = "

        Gefundene Zeilen: " len "

        "
      10. ; document.querySelector('#status').innerHTML = msg;
      11. für (i = 0; i < len; i ){ Alert(results.rows.item(i).log);
      12. } },
      13. null);
      14. });
      15. Letztes BeispielAbschließend fügen wir dieses Beispiel in ein vollständiges HTML5-Dokument wie dieses ein und versuchen, es in Safari auszuführen:
      16. JavaScript-Code
        17. Inhalt in die Zwischenablage kopieren
      1.   
      2.   
      3.   
      4. "text/javascript">   
      5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
      6. var msg;   
      7. db.transaction(function (tx) {   
      8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
      9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');   
      10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');   
      11.   msg = '

        Protokollnachricht erstellt und Zeile eingefügt.

        '        ;   
      12.   document.querySelector('#status').innerHTML =  msg;   
      13. });   
      14.   
      15. db.transaction(function (tx) {   
      16.   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {   
      17.    var len = results.rows.length, i;   
      18.    msg = "

        Gefundene Zeilen: "   len   "

        "        ;   
      19.    document.querySelector('#status').innerHTML  =  msg;   
      20.    für (i = 0; i < len; i ){   
      21.      msg = "

        "   results.rows.item(i).log   "

        "        ;   
      22.      document.querySelector('#status').innerHTML  =  msg;   
      23.    }   
      24.  }, null);   
      25. });   
      26.   
      27.   
      28.   
      29. "status" name="status">Statusmeldung
      30.   
      31.   

      生成如下所示结果:下:

      Protokollnachricht erstellt und Zeile eingefügt.

      Gefundene Zeilen: 2

      foobar

      logmsg

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：Detaillierte Erläuterung der grundlegenden Verwendung der Kommunikations-API in HTML5_html5-Tutorial-FähigkeitenNächster Artikel：Detaillierte Erläuterung der grundlegenden Verwendung der Kommunikations-API in HTML5_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen