Step 24: Persistence

We will use the browser's localStorage to add persistence.

Update the App.jsx as follows:

Add this useEffect to the App component to save the notes when they are updated:

useEffect(() => { window.localStorage.setItem("notes", JSON.stringify(notes)); }, [notes]);

Update this useEffect so instead of making fake random notes, we read them from the localStorage.

useEffect(() => { - const fakeNotes = []; - for (let index = 0; index < 5; index++) { - fakeNotes.push({ - id: faker.datatype.uuid(), - title: faker.lorem.sentence(), - text: faker.lorem.paragraph(), - }); - } - setNotes(fakeNotes); + const storedNotes = window.localStorage.getItem("notes", notes); + const initNote = storedNotes ? JSON.parse(storedNotes) : []; + setNotes(initNote); }, []);

Save the file and visit the running app. Try to add, edit, and delete a note. Each time, refresh the page to ensure the state persists!