Xiaoqiangs mobiler HTML5-Entwicklungsweg (19) - Lokaler HTML5-Speicher (lokaler Speicher)

1. Die Entwicklungsgeschichte der Browserspeicherung

Es gibt viele lokale Speicherlösungen, wie Flash SharedObject, Google Gears, Cookie, DOM Storage, User Data, window.name, Silverlight, Open Database usw .

Leihen Sie sich ein Bild aus dem Internet aus, um einen Blick auf die aktuellen gängigen lokalen Speicherlösungen zu werfen:

Cookies: werden im Internet häufig verwendet, sind aber nur in sehr begrenztem Umfang verfügbar Einschränkungen Offensichtlich ist die Kapazität aus Sicherheitsgründen zu gering. Cookies sind nicht so sicher wie angenommen. Der Inhalt des Cookies wird zusammen mit der Seitenanforderung gesendet.

Flash SharedObject: Kissys Store-Modul wird zum Aufrufen von Flash SharedObject verwendet. Der Vorteil von Flash SharedObject besteht darin, dass es über eine mäßige Kapazität verfügt und grundsätzlich keine Kompatibilitätsprobleme aufweist. Der Nachteil besteht darin, dass bestimmte SWF- und JS-Dateien in die Seite eingefügt werden müssen, was eine zusätzliche Belastung darstellt und auf einigen Computern umständlich ist eine Flash-Betriebsumgebung.

Google Gears: Die Offline-Lösung von Google wird nicht mehr aktualisiert. Die offizielle Empfehlung lautet, die HTML5-LocalStorage-Lösung zu verwenden.

Benutzerdaten: Es handelt sich um einen von Microsoft im System speziell für IE geöffneten Speicherplatz, der daher nur die Kombination von Windows+IE unterstützt. Der eigentliche Test erfolgte im Jahr 2000 (IE5.5), XP (IE6). , IE7). Es kann normal unter Vista (IE7) verwendet werden. Unter XP befindet es sich normalerweise in C:Dokumente und Einstellungen, Benutzername UserData, und manchmal befindet es sich in C:Dokumente und Einstellungen, Benutzername Anwendungsdaten,MicrosoftInternet ExplorerUserData. Unter Vista befindet es sich in C:Benutzer BenutzernameAppDataRoamingMicrosoftInternet ExplorerBenutzerdaten; die Größenbeschränkung einer einzelnen Datei beträgt 128 KB und es können insgesamt 1024 KB Dateien unter einem Domänennamen gespeichert werden. Es sollte keine Begrenzung für die Anzahl der Dateien geben. Auf eingeschränkten Websites betragen diese beiden Werte 64 KB bzw. 640 KB. Wenn also verschiedene Umstände berücksichtigt werden, ist es am besten, eine einzelne Datei auf weniger als 64 KB zu beschränken.

localStorage: Im Vergleich zu den oben genannten lokalen Speicherlösungen hat localStorage seine eigenen Vorteile: große Kapazität, einfache Bedienung, leistungsstarke, native Unterstützung; der Nachteil ist schlechte Kompatibilität (Chrome, Safari, Firefox, IE 9, IE8). alle unterstützen localStorage, werden hauptsächlich von Versionen unter IE8 nicht unterstützt) und sind weniger sicher (verwenden Sie daher bitte nicht localStorage zum Speichern vertraulicher Informationen).

Die LocalStorage-Browserkompatibilität in HTML5 ist wie folgt:

2. Der HTML5-LocalStorage-Vorgang verwendet

In HTML5 ist der lokale Speicher ein Fensterattribut, einschließlich localStorage und sessionStorage. Der Unterschied zwischen den beiden sollte anhand des Namens klar erkennbar sein begleitet nur die Sitzung und verschwindet, sobald das Fenster geschlossen wird. Die Verwendung ist bei beiden genau gleich.

Früher wurde das alles durch Cookies erledigt. Cookies eignen sich jedoch nicht zum Speichern großer Datenmengen, da sie bei jeder Anfrage an den Server weitergeleitet werden, was Cookies langsam und ineffizient macht.

In HTML5 werden Daten nicht bei jeder Serveranfrage übergeben, sondern die Daten werden nur verwendet, wenn sie angefordert werden. Es ermöglicht die Speicherung großer Datenmengen, ohne die Leistung der Website zu beeinträchtigen.

Für verschiedene Websites werden Daten in unterschiedlichen Bereichen gespeichert und eine Website kann nur auf ihre eigenen Daten zugreifen.

HTML5 verwendet JavaScript zum Speichern und Zugreifen auf Daten.

Die von der localStorage-Methode gespeicherten Daten haben keine zeitliche Begrenzung. Die Daten sind auch nach dem nächsten Tag, der nächsten Woche oder dem nächsten Jahr noch verfügbar. localStorage verfügt über drei Methoden zum Einrichten und Zugreifen auf lokalen Speicher.

localStorage.t1 ="Große Schüssel mit Trockenmischung";

localStorage["t2"]="HTML5";

localStorage .setItem("t3","http://blog.csdn.NET/dawanganban");

localStorage.t1 ;

localStorage["t2"];

localStorage.getItem("t3");

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
            }else{  
                    alert("你的浏览器不支持");  
            }  
              
  
        </script>  
    </body>  
</html>

Kommentieren Sie die obigen drei Zeilen des Zuweisungscodes aus und Sie werden es tun Finden Sie die Daten. Sie können weiterhin im Browser angezeigt werden.

Zusätzlich zur Abwicklung der oben genannten Zuweisung und des Abrufs verfügt localStorage auch über die folgenden Verwendungszwecke:

localStorage.removeItem(); //Löschen

localStorage.clear() //Alles löschen

localStorage.length //Wie viele Schlüssel sollen abgerufen werden

localStorage. key() // Den gespeicherten Schlüsselinhalt abrufen

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    //先清除一下  
                    localStorage.clear();  
  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
                      
                    //清除t2  全部清除用clear  
                    localStorage.removeItem("t2");  
  
                    for(var i=0;i<localStorage.length;i++){  
                        document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));  
                    }  
  
                      
            }else{  
                    alert("你的浏览器不支持");  
            }  
        </script>  
    </body>  
</html>

Das Obige ist Xiaoqiangs mobiler HTML5-Entwicklungsweg (19) - HTML5 Local Storage (lokaler Speicher). ) Inhalt, für weitere verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website (www.php.cn)!