0

primero de todo decir que no tengo bbdd para relizar lo que necesito. Lo que quiero es guardar el nombre que recoge un documento input file para poder mostrarlo y guardarlo en la pantalla de usuarios.

Por el momento estoy utilizando localStorage, el cual registra el dato y me lo devuelve en la tabla de usuarios. Además he convertido el dato en un array , para que me lo muestre como array y no como un dato del localStorage ... sin embargo no consigo hacer que este dato permanezca guardado en la pagina del usuario y que cada vez que el usuario carge un nuevo archivo se cree una lista. Si no que cambia el nombre del documento anterior por el actual.

Alguna idea de cómo puedo hacer esto? Tampoco tengo muy claro si se puede hacer sin base de datos. Gracias.

3
  • 3
    LocalStorage no expira y permite guardar muchos datos. Si los datos no se borran, por parte del usuario o de una aplicación, permanecerán en el navegador. Si tus datos se borran seguramente lo esta haciendo tu código. developer.mozilla.org/es/docs/Web/API/Window/localStorage
    – Orici
    Commented el 19 may. 2020 a las 15:48
  • Si quieres que el dato persista debes usar una BD, LocalStorage por lo general puede almacenar dependiendo del navegador hasta 5mb de información (otro factor a tener en cuenta). Si puedes adicionar código sería mucho más fácil para la comunidad poder ayudarte
    – jecorrales
    Commented el 19 may. 2020 a las 16:03
  • Por lo que entendido estás intentando almacenar datos de forma centralizada en un el localStorage. El localStorage es local, sólo se almacena en el mismo browser del client. Por último, este localStorage se puede eliminar (como caché) por lo que los ´datos ahí persistidos siempre deben ser de menor importancia como configuración, cookies, ...
    – VRoxa
    Commented el 19 may. 2020 a las 16:36

3 respuestas 3

0

Pongamos un caso hipotético en el que yo tengo la variable alumno la cual tienen como valor Alejandro y quiero guardarlo en el localStorage.

La instrucción que debes utilizar es la siguiente:

localStorage.setItem('alumno', 'Alejandro');

*Donde el primer parámetro equivale a la llave o nombre de nuestro elemento a almacenar. Y el segundo pertenece a el valor de ese elemento.*

Si has guardado tu dato de esa forma, debe persistir en tu navegador sin importar que recargues la página siempre y cuando no borres cache, ya que esta variable se guarda en la memoria de nuestro navegador, por lo tanto los datos están ligados a ese explorador y existirán hasta que borremos los datos de navegación. Si tu dato no esta cuando recargas debe ser problema de tu código.

prueba a consultarlo con:

var cat = localStorage.getItem('alumno');

Donde el parámetro que te solicita es la llave o nombre de tu elemento.

Revisa si no lo has borrado en alguna parte de tu código con alguna de estas instrucciones:

localStorage.removeItem('alumno');
localStorage.clear();

De igual forma si pudieras proporcionar tu código para revisarlo y encontrar el problema, así como la información de tu versión de JS o los frameworks que estés utilizando

Mas informacion sobre localStorage: https://developer.mozilla.org/es/docs/Web/API/Window/localStorage

2
  • Sobre todo gracias. Lo que trato de hacer es recoger el nombre de un archivo file, y mostrar el nombre de este archivo en el panel del usuario, tantas veces que el usuario introduzca un archivo file. El problema es que la funcionalidad que realiza el input file la realiza mediante una API (converAPI), por lo que los archivos que el usuario introduce en el input file nunca los registra nuestra bbdd.... Por lo que no conozco la forma de hacer que el nombre de ese archivo file se guarde y lo muestre en forma de listado en el panel usuario. Por ahora mi script es este :
    – Casper04
    Commented el 20 may. 2020 a las 9:00
  • No me permite introducir código ... estoy utilizando localStorage ya que al menos me deja ver la información introducida en ese momento aunque no se guarde, al introducir la siguiente.
    – Casper04
    Commented el 20 may. 2020 a las 9:08
0

Para mantener el array sin que te lo convierta en un string la mejor opción es convertirlo a un json te dejo un ejemplo

function sesioner(){
var matriz = ['ccc','bbb','aaaa']
console.log(matriz)
/*  puedes hacerlo en dos pasos o en uno
    var jsonMatriz = JSON.stringify(matriz);
    localStorage.setItem('files',jsonMatriz);
    yo lo pongo en una linea
*/
localStorage.setItem('pp',JSON.stringify(matriz))
/*  Lo puedes recuperar en dos lineas
  var recuperadoMatriz =localStorage.getItem('pp');
  var arrayRecuperado = JSON.parse(recuperadoMatriz);
    yo lo hago en una linea
*/
console.log(JSON.parse(localStorage.getItem('pp')))
}
sesioner();

Otra opción es pasarle un string separados por un carácter especial como ; (estilo csv) y luego hacer un split

var test='c:\\misDocumentos';
function sessionesString(masDoc){
test+=';'+masDoc;
localStorage.setItem('sesionita', test);
return localStorage.getItem('sesionita').split(';')
}
console.log(sessionesString('c:\\descargas'))
0

Tienes razón, necesitas una forma de mantener la lista de archivos subidos por el usuario sin usar una base de datos. El localStorage puede ser útil, pero tiene sus limitaciones.

Para solucionar esto, puedes utilizar un array dentro del localStorage y actualizarlo cada vez que el usuario suba un nuevo archivo. Aquí te explico cómo:

1. Obtener el nombre del archivo:

Cuando el usuario elige un archivo en el input file, usa el evento change para acceder al nombre del archivo:

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileName = file.name;

  // ... (guardar el nombre del archivo en el localStorage)
});

2. Guardar los nombres de los archivos en el localStorage:

Crea un array en el localStorage para almacenar los nombres de los archivos. Si no existe, crea uno nuevo.

Agrega el nombre del archivo recién subido al array.

Guarda el array actualizado en el localStorage.

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileName = file.name;

  let fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || []; // Obtiene el array o crea uno vacío
  fileNames.push(fileName); // Añade el nombre del archivo
  localStorage.setItem('uploadedFiles', JSON.stringify(fileNames)); // Guarda el array actualizado

  // ... (actualizar la visualización de la lista de archivos)
});

3. Mostrar la lista de archivos:

Cuando se cargue la página o después de que el usuario suba un archivo, recupera el array de uploadedFiles del localStorage.

Crea elementos HTML (por ejemplo, li) para cada archivo y agrega esos elementos a una lista en tu página.

function showUploadedFiles() {
  const fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
  const fileList = document.getElementById('fileList');
  fileList.innerHTML = ''; // Limpia la lista anterior

  fileNames.forEach(fileName => {
    const listItem = document.createElement('li');
    listItem.textContent = fileName;
    fileList.appendChild(listItem);
  });
}

// Llama a showUploadedFiles() cuando se cargue la página
window.onload = showUploadedFiles;

// Llama a showUploadedFiles() después de subir un archivo
fileInput.addEventListener('change', showUploadedFiles);

Ejemplo completo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Subir Archivos</title>
</head>
<body>
  <h1>Subir Archivos</h1>
  <input type="file" id="fileInput">
  <ul id="fileList"></ul>

  <script>
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');

    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      const fileName = file.name;

      let fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
      fileNames.push(fileName);
      localStorage.setItem('uploadedFiles', JSON.stringify(fileNames));

      showUploadedFiles();
    });

    function showUploadedFiles() {
      const fileNames = JSON.parse(localStorage.getItem('uploadedFiles')) || [];
      fileList.innerHTML = '';

      fileNames.forEach(fileName => {
        const listItem = document.createElement('li');
        listItem.textContent = fileName;
        fileList.appendChild(listItem);
      });
    }

    window.onload = showUploadedFiles;
  </script>
</body>
</html>

Recuerda:

El localStorage tiene limitaciones de tamaño, por lo que no es adecuado para grandes cantidades de archivos.

Si necesitas almacenar mucha información de archivos o tienes necesidades de seguridad más robustas, considera utilizar una base de datos.

Espero que esta explicación te sea útil. Si tienes alguna otra duda, no dudes en preguntar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.