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:
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('demo'));
$.each(storageFile, function(i, val){
$('#demoForm').find('[name="'+i+'"]').val(val);
});</p> <p> $('#demoForm').find('[type="submit"]').on('click', function(){
var data = $('#demoForm').getFormParam();
window.localStorage.setItem('demo', 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
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
var db = openDatabase(databasename,version,description,size)
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
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)!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
