Einführung in die Verwendung von HTML5 FileSystem API_html5 Tutorial-Fähigkeiten

Eine der Stärken von HTML5 besteht darin, dass Webprogramme einen temporären oder permanenten Speicherplatz (Kontingent) beantragen können, in dem Datenspeicherung und sogar Dateivorgänge ausgeführt werden können.

FileSystem bietet Vorgänge wie das Erstellen, Verschieben und Löschen von Ordnern und Dateien, was die lokale Verarbeitung von Daten erheblich erleichtert. Darüber hinaus befinden sich alle Daten in einer Sandbox (Sandbox) und verschiedene Webprogramme können nicht aufeinander zugreifen Datenintegrität und -sicherheit.

Im CatWrite-Projekt wird diese Funktion von HTML5 zum Speichern von Daten verwendet, was sehr praktisch ist. Derzeit unterstützt jedoch nur der Chrome-Browser die FileSystem-API besser, sodass sie nur im Chrome-Browser ausgeführt werden kann.

Beim Ausfüllen dieser Funktion habe ich viele Informationen von vor einem Jahr konsultiert. Aufgrund der Änderungen in den Browserversionen werde ich sie jedoch einzeln zusammenfassen und organisieren. Hier werden nur die im Projekt verwendeten APIs aufgelistet, was eine Zusammenfassung der abgeschlossenen Funktionen darstellt.

Speicherplatz beantragen
Um Daten zu speichern, müssen Sie einen Antrag im Browser stellen. Wenn es sich um eine dauerhafte Speicherung handelt, wird der Benutzer gefragt und die Ausführung wird erst nach Zustimmung fortgesetzt.

Zuerst müssen Sie die gewünschten Berechtigungen deklarieren.

Code kopieren

Der Code lautet wie folgt:

window.requestFileSystem = window. requestFileSystem ||. window.webkitRequestFileSystem; //Dateisystemanforderungsidentifikation
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL; //Erhalten Sie die Leseberechtigung der Datei basierend auf der URL

Nach Erhalt der Systemberechtigung können Sie Speicherplatz über den Browser beantragen

Kopieren Sie den Code

Der Code lautet wie folgt:

window. requestFileSystem(window.PERSISTENT, //persistent(permanent) oder temporary(temporär)
1024*1024, //1M
onInitFs, //Rückruffunktion nach Erfolg
errorHandler); //nach Fehler Rückruffunktion

Rückruffunktion

Code kopieren

Der Code lautet wie folgt:

function onInitFs(fs){
fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) {
console .log('Sie haben gerade das Verzeichnis ' dirEntry. name ' erstellt.');
}, errorHandler}
//Fehlerrückruf
function errorHandler(err){
var msg = 'Ein Fehler ist aufgetreten: ';
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg = 'Datei oder Verzeichnis nicht gefunden';
case FileError.NOT_READABLE_ERR:
msg = 'Datei oder Verzeichnis nicht lesbar';
case FileError.PATH_EXISTS_ERR:
msg = 'Datei oder Verzeichnis existiert bereits';
case FileError.TYPE_MISMATCH_ERR:
msg = '
break;
default:
break;
console .log(msg err);
}


Wenn Sie Erfolg haben, werden Sie den Aufruf der OnInitFs-Rückruffunktion bereuen und die getDirectory-Methode verwenden, um einen Ordner zu erstellen, der weiter unten erläutert wird.

Wenn Sie dies tun, wird es jedoch jedes Mal angewendet, wenn die Seite geladen wird. Dies ist definitiv nicht das, was wir wollen, ist, die Daten lesen zu können.

Stellen Sie fest, ob Speicherplatz beantragt wurde
Wir müssen also die Daten des Browsers lesen, um zu sehen, ob sie gespeichert wurden. Dies verwendet eine andere API:

Kopieren Sie den Code

Der Code lautet wie folgt:

void queryUsageAndQuota( in DOMString url, in EntryCallback successCallback,

in optional ErrorCallback errorCallback

);

Diese API kann den Space-Status des aktuellen Webs abfragen, Bei Erfolg wird die Callback-Funktion successCallback aufgerufen und der belegte Speicherplatz und der Gesamtspeicherplatz werden als Parameter an die Methode übergeben. Wenn dies fehlschlägt, wird errorCallback aufgerufen.

Code kopieren

Der Code lautet wie folgt:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, verbleibend){
if(remaining == ""){
console.log("Kein Leerzeichen angewendet. ");
}else{
console.log("benutzter Speicherplatz" belegt);
console.log("gesamter Speicherplatz" übrig);
}
},
errorHandler );

Wir können beurteilen, ob Platz für die Bewerbung vorhanden ist, indem wir den verbleibenden Parameter beurteilen. Wenn keine Bewerbung vorliegt, kehren Sie zum vorherigen Schritt zurück, um Platz zu beantragen. Wenn bereits Speicherplatz vorhanden ist, müssen Sie den Speicherplatz und die Datei besorgen, damit Sie die Daten verarbeiten können.

Dateieintrag abrufen
FileSystem verwendet ein spezielles Dateisystem und einen Sandbox-Modus. Auf Dateien in der Sandbox kann nicht auf einem Computer oder einem anderen Web zugegriffen werden.

Geben Sie in Ihrem Browser Folgendes ein:

?filesystem:http://catcoder.com/persistent/
　

Auf diese Weise können Sie auf diesem Computer auf die permanenten Daten der Website catcoder.com zugreifen. Ersetzen Sie „persistent“ durch „temporär“, um den temporären Speicherplatz zu lesen.

Dann können wir den Eintrag der Datei über die URL und die entsprechende API abrufen (ermöglicht das Nachschlagen des Eintrags für eine Datei oder ein Verzeichnis mit einer lokalen URL).

Code kopieren

Der Code lautet wie folgt:

void discoverLocalFileSystemURL(
in DOMString url ,
in EntryCallback successCallback,
in optionalem ErrorCallback errorCallback

Sie können die auf der Maschine gespeicherten Daten unten lesen

Code kopierenDer Code lautet wie folgt:

var url = "filesystem:http: //" window. location.host "/persistent/catwrite_documents/";
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader( );
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title("Default file", "");
console.log ("Keine Datei!");
}else{
console.log("Read results.length "files");
for(var i = 0; i < Ergebnisse . length; i ){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name); ) ;
};
readEntries();
,errorHandler);