Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

JAVASCRIPT STORAGE / CHAPTER 06 / Учене / LESSON 09

Повредени данни и възстановяване.

Около 5–10 минути

Теория. Запазеното може да е повредено: ръчна промяна, стара версия на приложението, прекъснат запис. Има ТРИ различни състояния при зареждане:

1. Няма ключ (getItem е null) — празно хранилище, нормално за първо отваряне. 2. Има ключ и JSON е валиден — данни. 3. Има ключ, но JSON.parse хвърля — ПОВРЕДЕНИ данни.

Състояние 3 НЕ Е същото като празно. Ако го покажеш като празен списък и после запишеш нов запис, ще презапишеш (и ще загубиш) единствената, може би поправима, версия на данните.

Правилният модел: - Покажи ясно състояние "load-error" и НЕ пипай ключа. - Предложи явно действие "Recover" (бутон). Чак на клик: по избор копирай повредения текст в резервен ключ (expenses-backup), после започни с празен списък. - Никога не изтривай мълчаливо като единствен път.

Честа грешка: catch, който записва [] ; зареждане, което връща [] при грешка; бутон Recover, който няма резервно копие.

Твоят урок

Хранилището съдържа повреден JSON под "expenses". На старт опитай parse в try/catch. При грешка: #status = "load-error" (НЕ празен списък), активирай бутона #recover и НЕ пипай ключа "expenses" — повреденият текст остава непокътнат. (Добави и click слушател на #recover, който копира повредения текст в "expenses-backup" и после записва "[]" — така възстановяването е явно действие. Това ще го тестваш в Practice.)

Ползвай само window.labStorage (НЕ localStorage): getItem / setItem / removeItem, стойности само низове. Не записвай пароли или токени.

HTML (точно този фиксчър):
<ul id="list"></ul><p id="status"></p><button id="recover" type="button" disabled>Recover</button>

Начално съдържание на window.labStorage:
{
  "expenses": "{\"id\":1,"
}

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

Учебен labStorage: Изолиран adapter (не е localStorage на сайта). API: getItem/setItem/removeItem/clear — ключове и стойности са низове; липсващ ключ → null. Не съхранявай пароли или токени.

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

Грешка при зареждане ≠ празно. Не презаписвай мълчаливо — първо покажи проблема.

lesson_09.jsJAVASCRIPT · PAGE

Зареждаме средата… При първо стартиране може да отнеме малко повече.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

labStorage сега

(празно)

Натисни Run — HTML се зарежда в sandbox iframe; Stop маха iframe-а (спира и безкраен цикъл).

01#status е "load-error"

02#recover е активен

03expenses остава непокътнат (повреденият текст)

КонзолаНапиши кода. Включи системата.

›

Прогрес в Профила →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

Зареждане…

JAVASCRIPT LABKALKULATORI.BG