1

estoy intentando hacer una to-do list con javascript, y quiero que las notas queden almacenadas en el localstorage para que no se borren al salir del navegador. He intentado guardarlas en el localstorage y de hecho lo he conseguido cada vez que actualizo los datos permanecen ahí pero el problema viene cuando vuelvo a escribir datos nuevamente, estos sobreescriben a los de antes no se como hacer, tienen alguna idea os dejo el código que llevo que es casi nada

   <div class="app-wrapper">
      <div class="fecha-container"></div>
      <div class="section">
        <div class="crear-notas">
          <input id="input" type="text" placeholder="Escriba su nota" />
          <div class="btn-mas">
            <i class="bi bi-plus-circle"></i>
          </div>
        </div>
        <div class="notas-container">
          <ul id="lista">
            <!-- <li>
              <h3>Nota ejemplo</h3>
              <i class="bi bi-trash"></i>
            </li> -->
          </ul>
        </div>
      </div>
    </div>




const btnMas = document.querySelector(".btn-mas");
const input = document.getElementById("input");
const lista = document.querySelector("#lista");
const btnTrash = document.querySelectorAll(".btn-trash");

let vector = [];

btnMas.addEventListener("click", () => {
  vector.push(input.value);
  localStorage.setItem("data", JSON.stringify(vector));
});
3
  • Usa la functión localStorage.getItem para recuperar el contenido de la clave deseada y luego le agregas los datos que quieras y después ya la puedes volver a guardar con el localStorage.setItem
    – masterguru
    Commented el 6 jun. a las 21:13
  • Lo que buscas es concatenar el vector al localStorage sin que se sobrescriba?, o que es lo que buscas, trata de explicar exactamente lo que quieres
    – PsychoMx
    Commented el 6 jun. a las 21:17
  • Quiero concatenar el vector al localStorage sin que se sobrescriba Commented el 6 jun. a las 21:19

1 respuesta 1

4

Prueba con esto, si deseas concatenar el vector al localStorage sin que se sobrescriba:

btnMas.addEventListener("click", () => {
    //Obtienes los datos existentes del localStorage
    let existingData = JSON.parse(localStorage.getItem("data")) || [];

    existingData.push(input.value); //Agregas los datos del nuevo vector

    localStorage.setItem("data", JSON.stringify(existingData)); //Guardas el item ya concatenado

    input.value = ''; // Limpiar el input
});
4
  • Boss, era exactamente lo que buscaba! Gracias! Commented el 6 jun. a las 21:45
  • Una última duda soy novato y no se que significa lo que has escrito en la segunda linea: || [] Commented el 6 jun. a las 21:48
  • 1
    Ese elemento || [] es una condición en donde si data no existe en el localStorage será un arreglo vacío así evitas que te de error por undefined, en pocas palabras es para comprobar que exista data, si no existe, se inicia como un arreglo vacío.
    – PsychoMx
    Commented el 6 jun. a las 22:11
  • 2
    Gracias por la ayuda boss! Commented el 6 jun. a las 22:30

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.