Introduction à l'utilisation des compétences du didacticiel HTML5 FileSystem API_html5

L'une des forces du HTML5 est qu'il permet aux programmes Web de demander un espace temporaire ou permanent (Quota) où le stockage de données et même des opérations sur les fichiers peuvent être effectués.

FileSystem fournit des opérations telles que la création, le déplacement et la suppression de dossiers et de fichiers, ce qui facilite grandement le traitement local des données. De plus, toutes les données sont dans un bac à sable (sandbox) et les différents programmes Web ne peuvent pas accéder les uns aux autres. l'intégrité et la sécurité des données.

Dans le projet CatWrite, cette fonctionnalité de HTML5 est utilisée pour stocker des données, ce qui est très pratique. Cependant, actuellement, seul le navigateur Chrome prend mieux en charge l'API FileSystem, elle ne peut donc s'exécuter que dans le navigateur Chrome.

En remplissant cette fonction, j'ai consulté beaucoup d'informations. Certaines informations datent d'il y a un an. Cependant, avec les changements de versions des navigateurs, certains codes sont devenus obsolètes. Je vais les résumer et les organiser un par un ici. Seules les API utilisées dans le projet sont répertoriées ici, ce qui constitue un résumé des fonctions réalisées.

Demander un espace
Afin de stocker des données, vous devez postuler au navigateur. S'il s'agit d'un stockage permanent, l'utilisateur sera invité et l'exécution ne se poursuivra qu'après consentement.

Vous devez d'abord déclarer les autorisations souhaitées.

Copier le code

Le code est le suivant :

window.requestFileSystem = window. requestFileSystem || window.webkitRequestFileSystem; //Identification de la demande du système de fichiers
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; //Obtenir l'autorisation de lecture du fichier en fonction de l'URL

Après avoir obtenu l'autorisation du système Vous pouvez demander de l'espace depuis le navigateur

Copiez le code

Le code est le suivant :

window. requestFileSystem(window.PERSISTENT, //persistent(permanent) ou Temporary(temporary)
1024*1024, //1M
onInitFs, //fonction de rappel après succès
errorHandler); //après erreur Fonction de rappel

Fonction de rappel

Copier le code

Le code est le suivant :

function onInitFs(fs){
fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) {
console .log('Vous venez de créer le répertoire ' dirEntry. name '.');
}, errorHandler
}
//Rappel d'erreur
function errorHandler(err){
var msg = 'Une erreur s'est produite : ';
switch (err.code) {
case FileError.NOT_FOUND_ERR :
msg = 'Fichier ou répertoire introuvable'; FileError.NOT_READABLE_ERR :
msg = 'Fichier ou répertoire non lisible';
break;
case FileError.PATH_EXISTS_ERR :
msg = 'Le fichier ou le répertoire existe déjà'; > case FileError.TYPE_MISMATCH_ERR :
msg = 'Type de fichier invalide';
break ;
msg = 'Erreur inconnue'
break ; .log(msg err);
}


Si vous réussissez, vous regretterez d'avoir appelé la fonction de rappel OnInitFs et utiliserez la méthode getDirectory pour créer un dossier, qui sera discuté ci-dessous.

Mais il y a un problème. Si vous faites cela, cela sera appliqué à chaque chargement de la page. Ce n'est certainement pas ce que nous voulons, c'est pouvoir lire les données lorsqu'il y a des données.


Déterminer si de l'espace a été demandé

Nous devons donc lire les données du navigateur pour voir si elles ont été stockées. Cela utilise une autre API :

Copiez le code

Le code est le suivant :

void queryUsageAndQuota( dans l'url DOMString, dans EntryCallback successCallback, dans ErrorCallback errorCallback

Cette API peut interroger l'état de l'espace du Web actuel, en cas de succès, la fonction de rappel successCallback sera appelée et l'espace utilisé et l'espace total seront transmis à la méthode en tant que paramètres. En cas d'échec, errorCallback est appelé.

Copier le code


Le code est le suivant :

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(utilisé, restant){
if(remaining == ""){
console.log("Aucun espace appliqué. ");
}else{
console.log("espace utilisé" utilisé);
console.log("tout l'espace" restant);
}
},
errorHandler ); ≪/p>

Nous pouvons juger s'il y a de l'espace de candidature en jugeant le paramètre restant. S'il n'y a pas de candidature, revenez à l'étape précédente pour demander de l'espace. S'il y a déjà de l'espace, vous devez obtenir l'espace et le fichier afin de pouvoir exploiter les données.

Obtenir l'entrée du fichier
FileSystem utilise un système de fichiers spécial et un mode sandbox. Les fichiers du bac à sable ne sont pas accessibles sur un ordinateur ou un autre site Web. Vous ne pouvez utiliser que le format d'accès correspondant.

Tapez dans votre navigateur :

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

De cette façon, vous pouvez accéder aux données permanentes du site catcoder.com sur cette machine. Remplacez persistant par temporaire pour lire l'espace temporaire.

Ensuite, nous pouvons obtenir l'entrée du fichier via l'URL et l'API correspondante (vous permet de rechercher l'entrée d'un fichier ou d'un répertoire avec une URL locale).

Copier le code

Le code est le suivant :

void solveLocalFileSystemURL(
dans l'url DOMString,
dans EntryCallback successCallback,
dans ErrorCallback errorCallback facultatif
);

Vous pouvez lire les données stockées sur la machine ci-dessous

Copier le code

Le code est le suivant :

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("Fichier par défaut", "");
console.log ("Aucun fichier!");
}else{
console.log("Lire les résultats.longueur "fichiers");
for(var i = 0; i < résultats . longueur ; je ){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name); ) ;
};
readEntries();
},errorHandler