Code Lab BetaBUILD. RUN. DISCOVER.

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

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

Приложение за разходи.

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

Проект. Събираме всичко в малко приложение за разходи, което помни:

1. load(): getItem → parse в try/catch → охрана на формата; при повреда покажи "load-error", не презаписвай. 2. render(): списък с "Title: amount" и общо "Total: N". 3. Добавяне: прочети полетата, нормализирай (trim, Number), добави запис със стабилно id (max + 1), save() в try/catch. 4. Статус: "save-failed" при грешка — никога фалшиво "Saved". 5. Старт: load(), render().

Хостът добавя записи, после презарежда страницата със същото хранилище и пуска кода ти отново — списъкът трябва да се върне от labStorage. Затова стартът (load + render) е задължителен.

Ключове на записа в точен ред: id, title, amount. Не записвай пароли и токени в браузърно хранилище.

Честа грешка: render само след добавяне; loadAll без охрана; общата сума не се смята отново след презареждане.

Твоят урок

Построй приложение за разходи със запазване (labStorage ключ "expenses", записи { id, title, amount } в този ред).
- Старт: зареди (null → []), parse в try/catch и охрана на формата; при повреда #status = "load-error" и НЕ презаписвай.
- Рендер: li "<title>: <amount>" в #list и "Total: <сума>" в #total.
- Submit: trim + Number, id = max + 1, запис в try/catch; при неуспех #status = "save-failed" и не показвай записа. (Не е оценявано, но е добър навик.)
Хостът добавя Rent 500 и Food 120, после презарежда страницата със същото хранилище и пуска кода ти — #list и #total трябва да се възстановят.

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

HTML (точно този фиксчър):
<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>

Хостът прави това след Run (по ред):
1. setValue #title = "Rent"
2. setValue #amount = "500"
3. submit #f
4. setValue #title = "Food"
5. setValue #amount = "120"
6. submit #f

След стъпките хостът презарежда страницата със същия labStorage и пуска кода ти отново — DOM трябва да покаже запазеното.

<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>

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

Заключителен проект: зареждане, охрана, рендер, честен запис и възстановяване.

lesson_11.jsJAVASCRIPT · PAGE

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

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

labStorage сега

(празно)

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

01#list е "Rent: 500Food: 120" след презареждане

02#total е "Total: 620"

03expenses съдържа записи с id 1 и 2

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

›

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

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

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

Зареждане…

JAVASCRIPT LABKALKULATORI.BG

<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><ul id="list"></ul><p id="total">Total: 0</p><p id="status"></p>