Lokaler HTML5-Speicher, lokaler Speicher, lokale Datenbank, SessionStorage, einfache Verwendungsbeispiele_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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

PHP中文网

Freigeben： 2016-05-16 15:47:55

Original

1634 Leute haben es durchsucht

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);//得到某个索引的值

Nach dem Login kopieren

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)

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)
});

Nach dem Login kopieren

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 (m.sbmmt.com)!