Ausführliche Erläuterung der HTML5-Speicherung

In diesem Artikel wird hauptsächlich die detaillierte Erklärung des HTML5-Speichers vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

HTML5storage bietet Websites eine Möglichkeit, Informationen lokal auf Ihrem Computer zu speichern und bei Bedarf später abzurufen. Dieses Konzept ähnelt Cookie, der Unterschied besteht jedoch darin, dass es für eine größere Speicherkapazität konzipiert ist. Die Größe des Cookies ist begrenzt und das Cookie wird jedes Mal gesendet, wenn Sie eine neue Seite anfordern. Der Speicher von HTML5 wird auf Ihrem Computer gespeichert. Nachdem die Seite geladen wurde, kann die Website verwenden Javascript , um diese Daten zu erhalten.

1, SessionStorage

Erkennung

!!window.sessionStorage;

Gemeinsame Methoden

.key = Wert

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

window.sessionStorage.name = 'rainman';           // 赋值  
window.sessionStorage.setItem('name','cnblogs');  // 赋值  
window.sessionStorage.getItem('name');            // 取值  
window.sessionStorage.removeItem('name');         // 移除值  
window.sessionStorage.clear();                    // 删除所有sessionStorage

Ereignis:

window.onstorage

Wertänderungen erkennen, Browserunterstützung ist nicht gut.

Anleitung:

Der Cookie-Speicher ist auf 4 KB begrenzt. Im Vergleich dazu verfügt der Sitzungsspeicher über einen größeren Speicherplatz, die spezifische Größe hängt jedoch vom Browserhersteller ab.
Cookie verfügt über einen Mechanismus, der darin besteht, das Cookie jedes Mal an den Server zu senden, wenn der Client den Server anfordert. Dies führt zweifellos zu vielen unnötigen Vorgängen, da nicht jede Anfrage an den Server gesendet wird benötigt alle Informationen des Cookies und die Sitzungsspeicherung löst dieses Problem sehr gut. Es sendet es nicht automatisch, was unnötige Arbeit reduziert.
Der Lebenszyklus der über sessionStorage gespeicherten Daten ähnelt dem von Session. Die Daten sind nach dem Schließen des Browsers (oder Tabs) nicht mehr vorhanden. SessionStorage ist jedoch weiterhin vorhanden, nachdem die Seite aktualisiert oder die Schaltfläche „Vorwärts“ oder „Zurück“ verwendet wurde.
Der Wert des Sitzungsspeichers für jedes Fenster ist unabhängig (jedes Fenster hat seine eigenen Daten, wenn das Fenster geschlossen wird). Der Sitzungsspeicher kann auch nicht gemeinsam genutzt werden .
Der Schlüssel und der Wert in setItem werden in Form von Zeichenfolgen gespeichert. Das heißt, wenn es den folgenden Code gibt: setItem('count', 1); was Sie durch getItem('count') + 5 erhalten, ist nicht die erwartete 6 (Ganzzahl), sondern '16' (String) .
Wenn Sie setItem erneut verwenden, um den Wert eines vorhandenen Schlüssels festzulegen, ersetzt der neue Wert den alten Wert.
Wenn sich die Daten im Speicher ändern, wird das entsprechende Ereignis (window.onstorage) ausgelöst. Die aktuelle Unterstützung für dieses Ereignis in verschiedenen Browsern ist jedoch nicht perfekt und kann ignoriert werden vorerst.

2, localStorage

Erkennen

!!window.localStorage;

方法和sessionStorage相同

说明：

1. local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。

2. 而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）。

3. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

举例

//结合JSON.stringify使用更强大  
var person = {'name': 'rainman', 'age': 24};  
localStorage.setItem("me", JSON.stringify(person));  
JSON.parse(localStorage.getItem('me')).name;    // 'rainman'  
  
/** 
* JSON.stringify，将JSON数据转化为字符串 
*     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}' 
*     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]' 
* JSON.parse，反解JSON.stringify 
*     JSON.parse('["a","b","c"]')                    // ["a","b","c"] 
*/

3、Database Storage

对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

A、打开链接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
if(!db) { alert("Failed to connect to database."); }                         // 检测连接是否创建成功

以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

B、执行查询

db.transaction( function(tx) {   
            tx.executeSql(  
            "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
            ['lebel', new Date().getTime()],   
            function(tx2, result){ alert('成功'); },   
            function(tx2, error){ alert('失败:' + error.message); }  
            );   
            });

1. 执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。

2. 该函数具有一个类型事务的参数（tx）。

3. 该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
   表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。

4. 执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
   

5. 执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图 
   

C、其它

• Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。

D、示例

//创建数据库  
var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);   
if(!db){  
	    alert("Failed to connect to database.");   
	} else {  
	    alert("connect to database 'K'.");   
	}  
	  
	// 创建表  
	db.transaction( function(tx) {   
	    tx.executeSql(  
	        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",   
	        [],   
	        function(){ alert('创建users表成功'); },   
	        function(tx, error){ alert('创建users表失败:' + error.message); }  
	    );  
	});   
	  
	// 插入数据  
	db.transaction(function(tx) {   
	    tx.executeSql(  
	        "INSERT INTO users (id, name) values(?, ?)",   
	        [Math.random(), 'space'],   
	        function(){ alert('插入数据成功'); },   
	        function(tx, error){ alert('插入数据失败: ' + error.message);}  
	    );   
	});   
	  
	// 查询  
	db.transaction( function(tx) {   	    tx.executeSql(  
	        "SELECT * FROM users", [],    
	         function(tx, result) {  
	            var rows = result.rows, length = rows.length, i=0;  
	            for(i; i < length; i++) {   
	                alert(  
	                    &#39;id=&#39; + rows.item(i)[&#39;id&#39;] +   
	                    &#39;name=&#39;+ rows.item(i)[&#39;name&#39;]  
	                );   
	            }   
	        },   
	        function(tx, error){  
	            alert(&#39;Select Failed: &#39; + error.message);  
	        }  
	    );   
	});   
	  
	// 删除表  
	db.transaction(function (tx) {    
	    tx.executeSql(&#39;DROP TABLE users&#39;);   
	    });

4、globalStorage

Dies wird auch in html5 vorgeschlagen. Nach dem Schließen des Browsers können die mit globalStorage gespeicherten Informationen weiterhin gespeichert werden gespeichert werden. Behalten Sie es bei. Genau wie localStorage können die auf jeder Seite in der Domain gespeicherten Informationen von allen Seiten geteilt werden

Grundlegende Syntax

• globalStorage['developer.mozilla.org'] – Alle Subdomains unter Developer.mozilla.org können Objekte über diesen Namespace lesen und schreiben.

• globalStorage['mozilla.org'] – Alle Webseiten unter dem Domainnamen mozilla.org können über dieses Namespace-Speicherobjekt gelesen und geschrieben werden.

• globalStorage['org'] – Alle Webseiten unter dem .org-Domänennamen können über dieses Namespace-Speicherobjekt gelesen und geschrieben werden.

• globalStorage[''] – Jede Webseite unter einem beliebigen Domänennamen kann über dieses Namespace-Speicherobjekt gelesen und geschrieben werden

Methodenattribute

• setItem(key, value) – Legen Sie den Schlüsselwert fest oder setzen Sie ihn zurück.

• getItem(key) – Den Schlüsselwert abrufen.

• removeItem(key) – Löschen Sie den Schlüsselwert.

• Schlüsselwert festlegen: window.globalStorage["planabc.net"].key = value;

• Schlüsselwert abrufen: value = window .globalStorage["planabc.net"].key;

Andere

• Abgelaufen Die Zeit ist dieselbe wie bei localStorage, und einige andere Funktionen ähneln auch localStorage.

• Jetzt unterstützt Firefox nur den globalen Speicher in der aktuellen Domäne. Wenn Sie die öffentliche Domäne verwenden, wird ein Fehler ähnlich dem „Sicherheitsfehler“-Code „1000“ verursacht.

5, Kompatibilität

Internet Explorer

localStorage

方法	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	2	8	10.50	4
sessionStorage	5	2	8	10.50	4
globalStorage	--	2	--	--	--

Methode

Chrome

Firefox (Gecko)

Opera

Safari (WebKit)

4

2

8

10,50

4

sessionStorage

5

2

8

10,50

4

globalStorage

--

2

--

--

--

Verwandte Empfehlungen: Ausführliche Erklärung der dynamischen Überwachungsspeicherschritte von vuex + localstorageDetaillierte Erklärung der HTMl5-Speichermethode sessionStorage und localStorage vuex kombiniert localstorage, um Speicheränderungen dynamisch zu überwachen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der HTML5-Speicherung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!