Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

JAVASCRIPT STORAGE / CHAPTER 06 / Learn / LESSON 09

Corrupt & Recover.

About 5–10 minutes

Theory. Saved data can be damaged: a manual edit, an old version of the app, an interrupted write. On load there are THREE different states:

1. No key (getItem is null) — an empty store, normal on the first visit. 2. A key and valid JSON — data. 3. A key but JSON.parse throws — CORRUPT data.

State 3 is NOT the same as empty. If you show it as an empty list and then save a new record, you overwrite (and lose) the only, maybe repairable, version of the data.

The right model: - Show a clear "load-error" state and do NOT touch the key. - Offer an explicit "Recover" action (a button). Only on click: optionally copy the damaged text into a backup key (expenses-backup), then start with an empty list. - Never delete silently as the only path.

Common mistake: a catch that saves []; a load function that returns [] on error; a Recover button with no backup.

Your lesson

The store holds corrupt JSON under "expenses". On start try parse in try/catch. On error: #status = "load-error" (NOT an empty list), enable the #recover button, and do NOT touch the key "expenses" — the damaged text stays intact. (Also add a click listener on #recover that copies the damaged text into "expenses-backup" and then writes "[]" — recovery is an explicit action. You will test that in Practice.)

Use only window.labStorage (NOT localStorage): getItem / setItem / removeItem, string values only. Never store passwords or tokens.

HTML (exactly this fixture):
<ul id="list"></ul><p id="status"></p><button id="recover" type="button" disabled>Recover</button>

Initial window.labStorage contents:
{
  "expenses": "{\"id\":1,"
}

<ul id="list"></ul><p id="status"></p><button id="recover" type="button" disabled>Recover</button>

Lab storage: Isolated adapter (not the site localStorage). API: getItem/setItem/removeItem/clear — keys and values are strings; missing key → null. Do not store passwords or tokens.

{
  "expenses": "{\"id\":1,"
}

A load error is not empty. Never overwrite silently — show the problem first.

lesson_09.jsJAVASCRIPT · PAGE

Loading the runtime… The first launch may take a little longer.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

labStorage now

(empty)

Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).

01#status is "load-error"

02#recover is enabled

03expenses stays intact (the damaged text)

ConsoleWrite the code. Bring it online.

›

Progress in Profile →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.

Loading…

JAVASCRIPT LABKALKULATORI.BG