DEV Community

loading...

Local storage question

Manuel Alonge
・1 min read

Hello,
I'm working on a notes taking app with local storage but I think I got stuck on this: https://github.com/matteobarone/notepadjs/tree/local-storage (code below)

import {localStorage} from './local-storage/local-storage';
document.addEventListener('DOMContentLoaded', () => {
const listItemElement = document.querySelector('.notepad_list');
const inputElement = document.querySelector('.notepad
input');
inputElement.addEventListener('keyup', (event) => {
if (event.keyCode === 13) {
addItem(event.target.value, listItemElement);
event.target.value = null;
}
})
});
function addItem(text, list, nextNotes) {
const el = document.createElement('li');
const textNode = document.createTextNode(text);
el.appendChild(textNode);
el.classList.add('notepad
_item');
list.appendChild(el);
// retrieve the notes that are already in localstorage
const notes = JSON.parse(localStorage.getItem('notes'));
// pushing your new note into the notes array - mutation
notes.push(text);
// setting the notes array JSON into localStorage
localStorage.setItem('notes', JSON.stringify(nextNotes));
}
I am basically trying to retrieve notes from the local storage but all I get is that the previous note is overridden by the next one. What am I doing wrong?

Discussion (5)

Collapse
manuelalonge profile image
Manuel Alonge Author
import {localStorage} from './local-storage/local-storage';

document.addEventListener('DOMContentLoaded', () => {
  const listItemElement = document.querySelector('.notepad__list');
  const inputElement = document.querySelector('.notepad__input');

  inputElement.addEventListener('keyup', (event) => {
    if (event.keyCode === 13) {
      addItem(event.target.value, listItemElement);
      event.target.value = null;
    }
  })
});

function addItem(text, list, nextNotes) {

  const el = document.createElement('li');
  const textNode = document.createTextNode(text);
  const nextNotes = [];
  el.appendChild(textNode);
  el.classList.add('notepad__item');
  list.appendChild(el);

  // retrieve the notes that are already in localstorage
  const notes = JSON.parse(localStorage.get('notes'));
  // pushing your new note into the notes array - mutation
  notes.push(nextNotes);
  // setting the notes array JSON into localStorage
  localStorage.set('notes', JSON.stringify(nextNotes));

}
Collapse
khrome83 profile image
Zane Milakovic

The code is hard to read. Can you update with a formatted block. Wrap the code in three back ticks on the top and bottom, also called a code fence in markdown.

I think the issue may be in the shape of the object that is being returned. Can you share that object?

Is there somewhere else where you handle adding a note, if nothing exists already in local storage?

Collapse
manuelalonge profile image
Manuel Alonge Author

Hi, I am trying with the above code now (I wrapped it following your suggestion, thanks)

Collapse
raduman profile image
Radu Man

I think you push to "notes", and then save in localstorage "nextNotes" which is passed as an argument and never used. Push "nextNotes" to "notes" and then save in local storage

Collapse
manuelalonge profile image
Manuel Alonge Author

Hi, I have tried with your suggestion but I'm getting the same result. I will think about it a little bit more.

import {localStorage} from './local-storage/local-storage';

document.addEventListener('DOMContentLoaded', () => {
  const listItemElement = document.querySelector('.notepad__list');
  const inputElement = document.querySelector('.notepad__input');

  inputElement.addEventListener('keyup', (event) => {
    if (event.keyCode === 13) {
      addItem(event.target.value, listItemElement);
      event.target.value = null;
    }
  })
});

function addItem(text, list) {

  const el = document.createElement('li');
  const textNode = document.createTextNode(text);
  const nextNotes = [];
  el.appendChild(textNode);
  el.classList.add('notepad__item');
  list.appendChild(el);

  // retrieve the notes that are already in localstorage
  const notes = JSON.parse(localStorage.get('notes'));  
  // setting the notes array JSON into localStorage
  localStorage.set('notes', JSON.stringify(nextNotes));
  // pushing your new note into the notes array - mutation
  notes.push(nextNotes);

}