Code Lab BetaBUILD. RUN. DISCOVER.

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

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

CRUD записи.

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

Теория. CRUD = Create, Read, Update, Delete. За записите ти трябва СТАБИЛНО id — число, което не се променя и не се повтаря. Индексът в масива НЕ е добро id: след изтриване всички след него се местят.

Ново id: най-голямото id + 1 (или 1 за празен списък).

function nextId(items) { let max = 0; for (const item of items) if (item.id > max) max = item.id; return max + 1; }

Операции: - Добавяне: items.push({ id: nextId(items), title, amount }). - Редакция: намери записа по id (find) и промени полето. - Изтриване: items = items.filter(item => item.id !== id).

След ВСЯКА промяна: save(items) и рендер. Ако пазиш в паметта и забравиш save, при презареждане промяната изчезва.

Редът на ключовете при запис е винаги един и същ: id, title, amount — така данните са предвидими.

Честа грешка: length + 1 като id (след изтриване се дублира); да търсиш по индекс; да забравиш save след редакция.

Твоят урок

Записите са { id, title, amount } (точно този ред на ключовете) в labStorage ключ "expenses". Реализирай: добавяне през #f (id = най-голямото id + 1, НЕ length + 1); редакция — #edit чете #edit-id и #edit-title и сменя title; изтриване — #del маха записа с id от #del-id. След ВСЯКА промяна запиши масива и обнови #list (li на запис) и #count ("N items"). Хостът: преименува 1, трие 2, добавя Gym 40 → id 4.

Ползвай само 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><input id="del-id" type="text"><button id="del" type="button">Delete</button><input id="edit-id" type="text"><input id="edit-title" type="text"><button id="edit" type="button">Rename</button><ul id="list"></ul><p id="count"></p>

Хостът прави това след Run (по ред):
1. setValue #edit-id = "1"
2. setValue #edit-title = "Rent!"
3. click #edit
4. setValue #del-id = "2"
5. click #del
6. setValue #title = "Gym"
7. setValue #amount = "40"
8. submit #f

Начално съдържание на window.labStorage:
{
  "expenses": "[{\"id\":1,\"title\":\"Rent\",\"amount\":500},{\"id\":2,\"title\":\"Food\",\"amount\":120},{\"id\":3,\"title\":\"Fun\",\"amount\":60}]"
}

<form id="f"><input id="title" name="title" type="text"><input id="amount" name="amount" type="text"><button type="submit">Add</button></form><input id="del-id" type="text"><button id="del" type="button">Delete</button><input id="edit-id" type="text"><input id="edit-title" type="text"><button id="edit" type="button">Rename</button><ul id="list"></ul><p id="count"></p>

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

{
  "expenses": "[{\"id\":1,\"title\":\"Rent\",\"amount\":500},{\"id\":2,\"title\":\"Food\",\"amount\":120},{\"id\":3,\"title\":\"Fun\",\"amount\":60}]"
}

Стабилните id оцеляват при триене; индексът не. Запис след всяка промяна.

lesson_08.jsJAVASCRIPT · PAGE

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

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

labStorage сега

(празно)

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

01#list има 3 записа

02#count е "3 items"

03expenses е [1 Rent!, 3 Fun, 4 Gym] с точни id

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

›

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

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><input id="del-id" type="text"><button id="del" type="button">Delete</button><input id="edit-id" type="text"><input id="edit-title" type="text"><button id="edit" type="button">Rename</button><ul id="list"></ul><p id="count"></p>