Pouvez-vous utiliser le stockage local HTML5 pour stocker un fichier? Sinon, comment?
Comment procéder pour mettre en cache/gérer de nombreux fichiers volumineux (vidéos) sur l'ordinateur d'un utilisateur via des mécanismes de navigateur (les plugins sont des solutions acceptables). D'après ce que je peux dire, le stockage local concerne les données de type base de données, pas les fichiers.
L'API FileSystem [1,2] allait être votre meilleur pari à l'avenir, à un moment donné, cela saignait beaucoup Edge. Cependant, il a été abandonné par le w3c. De leur propre documentation:
Les travaux sur ce document ont été interrompus et ne doivent pas être référencés ou utilisés comme base de mise en œuvre.
L'API FileSystem HTML5 est morte comme d'autres l'ont dit. IndexedDB semble être l'autre option. Voir ici .
La réponse à cette question dépend de vos réponses aux questions suivantes:
- Êtes-vous d'accord avec le fait que la prise en charge de l'écriture de fichiers n'existe actuellement que dans les navigateurs basés sur Chromium (Chrome et Opera)?
- Êtes-vous d'accord avec l'utilisation d'une API propriétaire dès maintenant pour tirer parti d'une telle capacité?
- Êtes-vous d'accord avec la possibilité de supprimer ladite API à l'avenir?
- Êtes-vous d'accord avec la restriction des fichiers créés avec ladite API vers un sandbox (un emplacement en dehors duquel les fichiers ne peuvent produire aucun effet) sur le disque?
- Êtes-vous d'accord avec l'utilisation d'un système de fichiers virtuel (une structure de répertoires qui n'existe pas nécessairement sur le disque sous la même forme que lors de l'accès depuis dans le navigateur) pour représenter ces fichiers?
Si vous avez répondu "oui" à toutes les réponses ci-dessus, alors avec les API File , FileWriter et FileSystem , vous pouvez lire et écrire des fichiers depuis le contexte d'un onglet/d'une fenêtre de navigateur utilisant Javascript.
Voici des exemples simples de la façon dont les API sont utilisées, directement et indirectement, en tandem pour faire ces choses:
Écrire un fichier:
//"SGVsbG8Gd29ybGQh" is "Hello world!" encoded in Base64; raw binary data can
//also be written with the use of Typed Arrays and the appropriate mime type
bakedGoods.set({
data: [{key: "testFile", value: "SGVsbG8Gd29ybGQh", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Lire le fichier:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Utilisation des API File, FileWriter et FileSystem brutes
Écrire un fichier:
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
//"SGVsbG8Gd29ybGQh" is "Hello world!" encoded in Base64;
//raw binary data can also be written with the use of
//Typed Arrays and the appropriate mime type
var dataBlob = new Blob(["SGVsbG8Gd29ybGQh"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Lire le fichier:
function onQuotaRequestSuccess(grantedQuota)
{
function getfile(directoryEntry)
{
function readFile(fileEntry)
{
function read(file)
{
var fileReader = new FileReader();
fileReader.onload = function(){var fileData = fileReader.result};
fileReader.readAsText(file);
}
fileEntry.file(read);
}
directoryEntry.getFile(
"testFile",
{create: false},
readFile
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Étant donné que vous êtes également ouvert aux solutions non natives (basées sur des plug-ins), vous pouvez profiter des E/S de fichiers activées par Silverlight dans IsolatedStorage , dont l'accès est fourni via Silverlight.
IsolatedStorage est similaire à bien des égards à FileSystem, en particulier, il existe également dans un bac à sable et utilise un système de fichiers virtuel. Cependant, code managé est requis pour utiliser cette fonction; une solution qui nécessite l'écriture d'un tel code dépasse le cadre de cette question.
Bien sûr, une solution qui utilise du code managé complémentaire, en laissant un avec seulement Javascript pour écrire, est bien dans le cadre de cette question;):
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "SGVsbG8Gd29ybGQh", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
* BakedGoods est maintenu par nul autre que ce gars ici:)
FSO.js encapsulera l'API HTML5 FileSystem pour vous, ce qui rendra très facile le stockage, la gestion et la manipulation d'ensembles de fichiers volumineux dans un système de fichiers en bac à sable.
La plupart des parties du stockage local html5 sont expliquées ci-dessus.
ici https://stackoverflow.com/a/11272187/1460465 il y avait une question similaire, pas sur les vidéos mais si vous pouvez ajouter un xml au stockage local.
J'ai mentionné un article dans ma réponse dans l'article javascript est utilisé pour analyser un xml vers le stockage local et comment l'interroger hors ligne.
Ça pourrait vous aider.
Le stockage local HTML5 est actuellement limité à 5 Mo par défaut dans la plupart des implémentations. Je ne pense pas que vous puissiez y stocker beaucoup de vidéos.
Source: https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html