A settings panel saved as JSON

Build a small settings panel that remembers its values with localStorage and JSON.

loadSettings() reads the "settings" key, parses it and returns a new object: the defaults merged with what was saved. If nothing is saved or the text is broken JSON, it returns a copy of DEFAULTS without throwing.

saveSettings(settings) stores the object as JSON under "settings" and shows it pretty-printed (2-space indentation) in #json.

Clicking Save saves { theme, fontSize } from the form, with fontSize as a number.

(In Hectal's preview, storage is kept in memory and resets on each Run.)

What Check tests

With nothing saved, loadSettings() returns the defaults
Broken JSON in storage doesn't throw: defaults come back
Clicking Save stores the form as JSON, with a number font size
#json shows the saved settings, pretty-printed
loadSettings() reads back what was saved
loadSettings() returns a new object, never DEFAULTS itself

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.

Command Palette

A settings panel saved as JSON