Estoy desarrollando una aplicación HTML/JS/CSS y me gustaría compartirla con la base de archivos. Así que mi equipo y yo podemos usarlo con un archivo HTML local (archivo://xxx.html). Tengo dos páginas separadas (archivos HTML), una lista de compras y otra despensa. Quiero agregar/marcar cosas de mi lista de compras como "compradas" que luego completarán la lista de artículos en mi despensa.
Intenté usar el almacenamiento local, pero parece estar basado en el dominio y no funciona bien entre los dos archivos. También estoy buscando soluciones sin conexión que deban mantener guardados los elementos agregados a cualquiera de las listas después de cerrar y volver a abrir el archivo.
No hay almacenamiento asociado con las URL file:// . Si puede configurar un servidor local simple o alojarlo en uno de los diversos servicios con un nivel gratuito, probablemente sea lo mejor.
Para hacerlo con solo un archivo, deberá hacer que el usuario cargue y guarde explícitamente el archivo:
input type="file" .Esta no es una gran experiencia de usuario, por supuesto.
Algo así ( enlace de CodeSandbox ; lamentablemente, Stack Snippets no permite la descarga):
<div> <label> Load list: <input id="file-load" type="file" /> </label> </div> <input id="btn-save" type="button" value="Save List" /> <ul id="list"></ul> <div> <label> Add: <input id="item-text" type="text" width="20" /> </label> <input id="btn-add" type="button" value="Add" /> </div> const listElement = document.getElementById("list"); const fileInput = document.getElementById("file-load"); const saveButton = document.getElementById("btn-save"); const addButton = document.getElementById("btn-add"); const itemText = document.getElementById("item-text"); function addListItem(text) { const li = document.createElement("li"); li.textContent = text; listElement.appendChild(li); } fileInput.addEventListener("change", (e) => { e.currentTarget.files[0].text() .then(json => { const list = JSON.parse(json); for (const element of list) { addListItem(element); } }) .catch(error => { alert("Error loading list file!"); }); }); saveButton.addEventListener("click", () => { const list = Array.from( listElement.children, li => li.textContent ); const json = JSON.stringify(list); const blob = new Blob([json], { type: "application/json" }); const objUrl = URL.createObjectURL(blob); const link = document.createElement("a"); link.download = "list.json"; link.href = objUrl; document.body.appendChild(link); link.click(); setTimeout(() => { // Older Firefox needed this document.body.removeChild(link); }, 100); }); addButton.addEventListener("click", () => { const text = itemText.value.trim(); if (text) { addListItem(text); } itemText.value = ""; itemText.focus(); }); Eso es solo mantener una lista de cadenas, pero puede convertirla en una lista de objetos en su lugar, para que pueda tener su bandera checked , etc.)