Actualmente estoy creando una aplicación para escribir notas y necesito su ayuda.
Me cuesta entender cómo funciona localStorage() y cómo exactamente guardé las cosas en él. Me gustaría volver a cargar la página y que no desaparezcan todas las notas que he escrito.
Gracias.
//// Declare Variables //// const noteBtn = document.querySelector('.add-note-btn'); const writeNote = document.querySelector('.note-input'); const allSavedNotes = document.querySelector('.added-notes'); //// Write new note and add to list //// noteBtn.addEventListener('click', function(e){ // Create new paragraph element let newNote = document.createElement('p'); // Add clas name to element newNote.className = 'saved-note'; // Add the text input newNote.textContent = writeNote.value; // Append element to div allSavedNotes.appendChild(newNote); e.preventDefault(); }) <div class="all"> <div> <div class="title"> <h1 class="heading">Notes List</h1> </div> <div> <div class="writing-notes"> <textarea class="note-input" cols="35" rows="10"></textarea> <a href="#" class="add-note-btn">Add note</a> </div> <div class="added-notes"> </div> </div> </div> </div>Puede guardar todas las notas en localStorage agregando el estado a una matriz vacía.
Inicialmente creé una variable de state que contiene una matriz anterior undefined o vacía.
Luego, la función appendNotes agrega un párrafo al selector DOM allSavedNotes .
//// Declare Variables //// const noteBtn = document.querySelector('.add-note-btn'); const writeNote = document.querySelector('.note-input'); const allSavedNotes = document.querySelector('.added-notes'); const state = JSON.parse(localStorage.getItem('notes')) || []; function appendNotes(text) { let p = document.createElement('p'); p.textContent = text; // Append element to div allSavedNotes.appendChild(p); } // append notes on page load state.map(s => appendNotes(s)); //// Write new note and add to list //// noteBtn.addEventListener('click', function(e) { // Create new paragraph element let newNote = document.createElement('p'); // Add class name to element newNote.className = 'saved-note'; const text = writeNote.value.trim(); // Add the text input newNote.textContent = text; // if there are no `notes` in `localStorage` then use empty array if (text !== "") { state.push(text) localStorage.setItem('notes', JSON.stringify(state)); } // Append element to div appendNotes(text); newNote.textContent = ""; e.preventDefault(); }) <div class="all"> <div> <div class="title"> <h1 class="heading">Notes List</h1> </div> <div> <div class="writing-notes"> <textarea class="note-input" cols="35" rows="10"></textarea> <a href="#" class="add-note-btn">Add note</a> </div> <div class="added-notes"> </div> </div> </div> </div>El código anterior no provendrá directamente de StackOverflow, ya que genera un error de origen cruzado:
Error de seguridad no detectado: no se pudo leer la propiedad 'localStorage' de 'Ventana': el documento está en un espacio aislado y carece del indicador 'permitir el mismo origen'.
Pero funciona en JSFiddle. Aquí hay un enlace que funciona → https://jsfiddle.net/deadcoder0904/036bp9zy/33/
Puede obtener más información sobre localStorage en esta excelente publicación de blog → https://www.digitalocean.com/community/tutorials/js-introduction-localstorage-sessionstorage