Heim > Artikel > Web-Frontend > Lokaler HTML5-Speicher, lokaler Speicher, lokale Datenbank, SessionStorage, einfache Verwendungsbeispiele_HTML5-Tutorial-Fähigkeiten

Lokaler HTML5-Speicher, lokaler Speicher, lokale Datenbank, SessionStorage, einfache Verwendungsbeispiele_HTML5-Tutorial-Fähigkeiten

PHP中文网Original: 2016-05-16 15:47:551620Durchsuche

Eine sehr coole Funktion von HTML5 ist der Webspeicher, der den vorherigen Cookies ähnelt, der Unterschied besteht jedoch darin, dass der Webspeicher eine lokale Speicherkapazität von 5 MB hat, während Cookies nur 4 KB groß sind, was völlig unvergleichliche Vorteile darstellt .
Webstrange ist unterteilt in: Localstorage, Sessionstorage und lokale Datenbank.

Als nächstes werde ich sie einzeln vorstellen:

1. Die Verwendung von Localstorage ist relativ einfach:
Der Code ist wie folgt:

Eine kleine Demo, um die Funktion zu zeigen:

localStorage.setItem(key,value);//保存数据
localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
key：localStorage.key(index);//得到某个索引的值

Der Code ist wie folgt:

HTML-Code:

(function($){
$(function(){
$.fn.getFormParam=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};</p> <p> var storageFile =JSON.parse(window.localStorage.getItem(&#39;demo&#39;));
$.each(storageFile, function(i, val){
$(&#39;#demoForm&#39;).find(&#39;[name="&#39;+i+&#39;"]&#39;).val(val);
});</p> <p> $(&#39;#demoForm&#39;).find(&#39;[type="submit"]&#39;).on(&#39;click&#39;, function(){
var data = $(&#39;#demoForm&#39;).getFormParam();
window.localStorage.setItem(&#39;demo&#39;, JSON.stringify(data));
return false;
});
});
})(jQuery)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.10.2.min.js"></script>
<script src="demo.js"></script>
<title>Document</title>
</head>
<body>
<form id="demoForm">
<p><label><span>姓名</span><input name="name"></label></p>
<p><label><span>年龄</span><input name="age"></label></p>
<p><label><span>学号</span><input name="number"></label></p>
<p><label><span>地址</span><input name="address"></label></p>
<p><label><span>爱好</span><input name="habit"></label></p>
<p><label><span>其他</span><textarea name="big" id="" cols="30" rows="10"></textarea></label></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>

Auf diese Weise wird eine einfache Demo realisiert, die localstorage zeigt

2. sessionStorage

Die Verwendung von sessionStorage ist die gleiche wie die von localStorage , aber sessionStorage wird gelöscht, wenn der Browser die Website schließt, und localStorage wird immer im Browser gespeichert, und beide können je nach Bedarf zusammen verwendet werden.

3. Lokale Datenbank

Studenten, die mit der IOS/Android-Entwicklung vertraut sind, sollten mit SQLite-Datenbanken vertraut sein

Die Bedienung der Datenbank in HTML5 ist relativ einfach und umfasst hauptsächlich die openDatabase-Methode und die Transaktion Methode
Verwenden Sie eine Objektdatenbank, um das von openDatabase erstellte Objekt zu empfangen, um auf die Datenbank zuzugreifen

wobei

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

Datenbankname: Datenbankname

Version: Datenbankversion ist optional
Beschreibung: Datenbankbeschreibung
Größe: Größe des Datenbankzuordnungsraums

Die Transaktionsmethode verwendet eine Rückruffunktion als Parameter und führt eine bestimmte Methode für den Zugriff auf die Datenbank in der Funktion aus

Die Vier Parameter der Methode „executeSql“ sind:

db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});

sqlQuery: die SQL-Anweisung, die speziell ausgeführt werden muss, create||select||update||delete;

[value1, value2..] : Das Array aller in der SQL-Anweisung verwendeten Parameter. Ersetzen Sie in der MethodeexecuteSql zunächst die in der SQL-Anweisung zu verwendenden Parameter durch „?“, fügen Sie diese Parameter dann der Reihe nach in ein Array ein und fügen Sie sie in das zweite ein Parameter;

dataHandler: Rückruffunktion für Ausführungserfolg;

errorHandler: Rückruffunktion für Ausführungsfehler

Das Obige ist der Inhalt einfacher Anwendungsbeispiele für Localstorage, Local Database und SessionStorage Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

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：Beispiele für die Verwendung des Scoped-Attributs in HTML5_html5-Tutorial-TippsNächster Artikel：Beispiele für die Verwendung des Scoped-Attributs in HTML5_html5-Tutorial-Tipps

In Verbindung stehende Artikel

Mehr sehen