En un sitio que estoy implementando, los usuarios guardan archivos en su dispositivo local. Quiero implementar el guardado automático, pero preguntas como esta me convencieron de que no era posible sin un cuadro de diálogo "Guardar archivo" para cada escritura en el sistema de archivos (a menos que el usuario modifique la configuración predeterminada del navegador).
Sin embargo, ¡veo que app.diagrams.net lo hace! Una vez que especifico una ruta de archivo a través de un cuadro de diálogo inicial, mis ediciones se guardan automáticamente sin cuadros de diálogo adicionales. Ese proyecto es de código abierto , pero mis esfuerzos por encontrar el código relevante hasta ahora no han tenido éxito.
Alguien sabe como se hace?
Estos son los pasos para demostrar que es posible:
Un vistazo rápido a la fuente y apps.diagram.net está utilizando la API de acceso al sistema de archivos para escribir en el sistema de archivos. Si mantiene el identificador del archivo a su alrededor, podrá continuar creando un elemento de escritura en él. Requiere que las cosas se ejecuten desde un contexto seguro (https) para funcionar.
He aquí un ejemplo simplificado:
var fHnd = null; var counter = 0; var autoSaveOn = true; window.onload = function() { var autoSave = async function() { if (autoSaveOn) { counter++; document.getElementById('status').innerHTML = 'Saving...' const writable = await fHnd.createWritable(); await writable.write(counter); await writable.close(); document.getElementById('status').innerHTML = ''; window.setTimeout(autoSave, 3000); } } document.getElementById('btnAutoSave').addEventListener('click', async() => { if (autoSaveOn) { autoSaveOn = false; document.getElementById('btnAutoSave').innerHTML = 'Turn autosave on'; } else { autoSaveOn = true; document.getElementById('btnAutoSave').innerHTML = 'Turn autosave off'; await autoSave(); } }); document.getElementById('btnCreateFile').addEventListener('click', async() => { fHnd = await window.showSaveFilePicker({ types: [{ description: 'Text Files', accept: { 'text/plain': ['.txt'] } }] }); document.getElementById('btnCreateFile').style.display = 'none'; document.getElementById('btnAutoSave').style.display = 'block'; await autoSave(); }); } <!doctype html> <html> <head> <script language="javascript" src="./sample.js"></script> </head> <body> <button id="btnCreateFile">Save to file</button> <p id="status"></p> <button id="btnAutoSave" style="display: none">Turn autosave off</button> </body> </html>