JavaScript y OPFS: almacenar y leer archivos
En este artículo voy a enseñarte a usar el Origin Private File System con JavaScript para almacenar, leer y eliminar cualquier tipo de archivo en el navegador web.
Sistema de archivos en la web con JavaScript y OPFS
Puedes probar la demostración aquí: https://stackblitz.com/edit/vitejs-vite-hl34zf?file=index.html
Como lo dije anteriormente, el Origin Private File System ha llegado para revolucionar las cosas con JavaScript. Gracias al OPFS podemos tener un sistema de archivos completo con JavaScript directamente en el navegador web.
Con esto, podemos escribir cualquier tipo de archivo en el web browser, así como descargarlo más adelante. Todo ello sin depender de localStorage o cosas similares; es una tecnología diferente.
Se pueden guardar documentos de texto, imágenes, vídeos e incluso bases de datos, además de que no hay necesidad de pedir permiso o confirmación al usuario, todo es transparente.
Encabezados para usar OPFS en JavaScript (CORS 2)
El Origin Private File System (también llamado OPFS) permite tener un sistema de archivos completo directamente en el navegador web con el que podemos interactuar a través de JavaScript.
Para que OPFS esté disponible necesitamos servir el contenido con 2 encabezados importantes:
- Cross-Origin-Opener-Policy: same-origin
- Cross-Origin-Embedder-Policy: require-corp
No importa el lenguaje de programación ni el servidor usado para servir los archivos; el código JavaScript debe ser servido con un servidor que envíe esos headers. Si no lo hacemos de esa manera no vamos a poder acceder al OPFS.