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 08

CRUD Records.

About 5–10 minutes

Theory. CRUD = Create, Read, Update, Delete. For records you need a STABLE id — a number that does not change and is never reused. The array index is NOT a good id: after a delete everything after it shifts.

New id: the largest id + 1 (or 1 for an empty list).

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

Operations: - Add: items.push({ id: nextId(items), title, amount }). - Edit: find the record by id (find) and change the field. - Delete: items = items.filter(item => item.id !== id).

After EVERY change: save(items) and render. If you keep data only in memory and forget save, the change disappears on reload.

Keep the key order the same when you write records: id, title, amount — the data stays predictable.

Common mistake: length + 1 as an id (it duplicates after a delete); searching by index; forgetting save after an edit.

Your lesson

Records are { id, title, amount } (exactly this key order) under the labStorage key "expenses". Implement: add via #f (id = largest id + 1, NOT length + 1); edit — #edit reads #edit-id and #edit-title and changes the title; delete — #del removes the record whose id is in #del-id. After EVERY change save the array and refresh #list (one li per record) and #count ("N items"). The host: renames 1, deletes 2, adds Gym 40 → id 4.

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

HTML (exactly this fixture):
<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>

The host does this after Run (in order):
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

Initial window.labStorage contents:
{
  "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>

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,\"title\":\"Rent\",\"amount\":500},{\"id\":2,\"title\":\"Food\",\"amount\":120},{\"id\":3,\"title\":\"Fun\",\"amount\":60}]"
}

Stable ids survive deletes; the index does not. Save after every change.

lesson_08.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#list has 3 records

02#count is "3 items"

03expenses is [1 Rent!, 3 Fun, 4 Gym] with exact ids

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

<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>