Local storage issue

Hello, I'm working on a notes taking app with local storage but I think I got stuck on this: github.com/matteobarone/notepadjs/tree/loca.. (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);
// retrieve the notes that are already in localstorage
const notes = JSON.parse(localStorage.getItem('notes'));
// pushing your new note into the notes array - mutation
// 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. I have already looked up online and asked questions on stackoverflow but I don't seem to get to the answer. What am I doing wrong?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Comments (5)

Lars Wächter's photo

In the following line:

localStorage.setItem('notes', JSON.stringify(nextNotes));

where does the value for nextNotes come from? When you call the addItem function, you do not pass any argument for nextNotes.

You push the new note to the notes array but you store nextNotes in the local storage afterwards.

Don't you mean:

localStorage.setItem('notes', JSON.stringify(notes));
Show +2 replies
Lars Wächter's photo

Manuel Alonge

I had a look on your code on GitHub. The problem is your localStorage.setItem and localStorage.getItem method.

From local-storage.js you export an object with a get, set and remove method. So when you call localStorage.setItem or localStorage.getItem in your file above, there are no function with these names.

You have to call localStorage.set and localStorage.get.

But there are also othere bugs you will get when you fix this one.

Lars Wächter's photo

If you like I can make a pull request on your repo to help you.