Puoi utilizzare l’archiviazione locale HTML5 per archiviare un file? Se no, come?

Come procedere nel caching / gestione di molti file di grandi dimensioni (video) sul computer di un utente tramite meccanismi del browser (i plug-in sono soluzioni accettabili). Da quello che posso dire, l’archiviazione locale riguarda i dati del tipo di database, non i file.

L’API FileSystem [1,2] sarebbe stata la soluzione migliore in futuro, a un certo punto era molto sanguinosa. Tuttavia è stato abbandonato da w3c. Dalla loro stessa documentazione:

Il lavoro su questo documento è stato interrotto e non dovrebbe essere referenziato o utilizzato come base per l’implementazione.

  1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
  2. http://www.html5rocks.com/tutorials/file/filesystem/

L’API File5 di HTML5 è morta come altri hanno già detto. IndexedDB sembra essere l’altra opzione. Vedi qui

La risposta a questa domanda dipende dalle tue risposte alle seguenti domande:

  • Stai bene con il fatto che il supporto per la scrittura dei file esiste attualmente solo nei browser basati su Chromium (Chrome & Opera)?
  • Stai bene con l’utilizzo di un’API proprietaria di ora in poi per trarre vantaggio da tale capacità?
  • Stai bene con la possibilità di rimozione di dette API in futuro?
  • Stai bene con la costrizione dei file creati con detta API in una sandbox (una posizione al di fuori della quale i file non possono produrre alcun effetto) sul disco?
  • Stai bene con l’uso di un file system virtuale (una struttura di directory che non esiste necessariamente su disco nella stessa forma che fa quando si accede dal browser) per rappresentare tali file?

Se hai risposto “sì” a tutto quanto sopra, con le API File , FileWriter e FileSystem , puoi leggere e scrivere file dal contesto di una scheda / finestra del browser usando Javascript.

Ecco alcuni semplici esempi di come le API vengono utilizzate, direttamente e indirettamente, in tandem per fare queste cose:

BakedGoods *

Scrivi il file:

//"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){} }); 

Leggi il file:

 bakedGoods.get({ data: ["testFile"], storageTypes: ["fileSystem"], options: {fileSystem:{storageType: Window.PERSISTENT}}, complete: function(resultDataObj, byStorageTypeErrorObj){} }); 

Utilizzo delle API raw File, FileWriter e FileSystem

Scrivi il file:

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

Leggi il file:

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

Dal momento che sei aperto anche a soluzioni non native (basate su plug-in), puoi sfruttare l’I / O di file abilitato da Silverlight in IsolatedStorage , l’accesso al quale è fornito tramite Silverlight.

IsolatedStorage è simile in molti aspetti a FileSystem, in particolare esiste anche in una sandbox e fa uso di un file system virtuale. Tuttavia, è richiesto il codice gestito per utilizzare questa funzione; una soluzione che richiede la scrittura di questo codice esula dallo scopo di questa domanda.

Ovviamente, una soluzione che fa uso di codice gestito complementare, lasciandone uno con solo Javascript da scrivere, rientra ampiamente nello scopo di questa domanda;):

 //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 è gestito da nientemeno che questo ragazzo proprio qui 🙂

La memoria locale HTML5 è attualmente limitata a 5 MB per impostazione predefinita nella maggior parte delle implementazioni. Non penso che tu possa memorizzare un sacco di video lì dentro.

Fonte: https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

Bene, molte parti della memoria locale HTML5 sono spiegate sopra.

qui https://stackoverflow.com/a/11272187/1460465 c’era una domanda simile, non riguardante i video, ma se è ansible aggiungere un xml all’archivio locale.

Ho menzionato un articolo nella mia risposta nell’articolo javascript è usato per analizzare un XML alla memoria locale e come interrogarlo offline.

Potrebbe aiutarti.

FSO.js avvolgerà per te le API FileSystem HTML5, semplificando l’archiviazione, la gestione e la manipolazione di insiemi di file di grandi dimensioni in un file system in modalità sandbox.