Saved Notes

Persist an array of note objects with localStorage and JSON.

Write a note

Title

Body

No notes saved yet.

Notes on the page

Important HTML

JavaScript reads the form, wires save/load actions, and fills the empty notes list.

<input id="note-title" type="text" name="note-title" placeholder="Note title">
<input id="note-body" type="text" name="note-body" placeholder="Short note text">
<button id="add-note" type="button">Add note</button>
<button id="save-notes" type="button">Save to localStorage</button>
<button id="load-notes" type="button">Load from localStorage</button>
<button id="clear-storage" type="button">Clear storage</button>
<p id="save-status">No notes saved yet.</p>
<div id="notes-list"></div>

Important JavaScript

Store strings only. Use JSON when saving or loading arrays of notes.

localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
const savedText = localStorage.getItem(STORAGE_KEY);
const savedNotes = JSON.parse(savedText);
localStorage.removeItem(STORAGE_KEY);