El sistema de archivos HTML5 es una API potente. Con el poder, viene la complejidad. Con la complejidad, vienen más frustraciones de depuración. Lamentablemente, las DevTools de Chrome no son compatibles con la API de Filesystem. Esto hace que la depuración sea más difícil de lo que debería ser. Cuando digo difícil, me refiero a que debes escribir código para enumerar o quitar archivos del sistema de archivos.
Durante mis esfuerzos con la API de Filesystem, aprendí algunas sugerencias que me gustaría compartir. Cada sugerencia tiene su propio conjunto de limitaciones, pero usar una combinación de ellas te permitirá avanzar un 90%. Estos son los 5 principales:
Asegúrate de no ejecutar desde
file://
. Esta es una estafa engañosa que afecta a muchas personas. Chrome impone restricciones de seguridad importantes enfile://
. Muchas de las APIs de archivos avanzadas (BlobBuilder
,FileReader
, API de Filesystem, etc.) arrojan errores o fallan de forma silenciosa si ejecutas la app de forma local desdefile://
. Si no tienes un servidor web a mano, Chrome se puede iniciar con la marca--allow-file-access-from-files
para omitir esta restricción de seguridad. Usa esta marca solo con fines de prueba.El temido
SECURITY_ERR
oQUOTA_EXCEEDED_ERR
. Esto suele ocurrir cuando intentas escribir datos, pero estás bajo la influencia del punto 1. Si no es así, es probable que no tengas cuota. Existen dos tipos de cuota con los que se puede abrir el sistema de archivos:TEMPORARY
oPERSISTENT
. Si usas la última opción, el usuario debe otorgar almacenamiento persistente a tu app de forma explícita. Consulta esta publicación para saber cómo hacerlo.filesystem:
URL FTW. Es útil abrir la URL defilesystem:
para elDirectoryEntry
raíz del origen de tu app. ¿Qué significa eso? Por ejemplo, si tu app se encuentra enwww.example.com
, abrefilesystem:http://www.example.com/temporary/
en una pestaña nueva. Chrome mostrará una lista de solo lectura de los archivos o carpetas almacenados en el origen de tu app. Para obtener más información sobre las URLs defilesystem:
, consulta https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.chrome://settings/cookies
es tu amigo. Esta página te permite borrar los datos almacenados para un origen. Esto incluye el almacenamiento de bases de datos, AppCache, cookies, localStorage y elementos de la API de FileSystem. Sin embargo, ten en cuenta que es una opción de todo o nada. No puedes quitar solo un archivo o datos.No te olvides de las devoluciones de llamada de error. La API de Filesystem se encuentra en un mundo asíncrono (a menos que uses la versión sincronizada en los trabajadores). Siempre usa la devolución de llamada de error en tus llamadas a la API. Son opcionales, pero te ahorrarán muchos problemas más adelante cuando todo explote.