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 07

Save a List.

About 5–10 minutes

Theory. A list of records is stored as ONE key with JSON text, for example key "expenses" holding '[{"title":"Rent","amount":500}]'. The pattern is always the same:

1. Load: const raw = window.labStorage.getItem("expenses"); if null → empty array, else JSON.parse(raw). 2. Change in memory: items.push(record). 3. Save: window.labStorage.setItem("expenses", JSON.stringify(items)). 4. Render: show items in the list.

After a reload the code goes through step 1 and restores the list. So LOADING is part of the program, not only the save.

Small examples:

function load() { const raw = window.labStorage.getItem("expenses"); return raw === null ? [] : JSON.parse(raw); } function save(items) { window.labStorage.setItem("expenses", JSON.stringify(items)); }

Common mistake: writing only the new record instead of the whole array; forgetting Number for the amount; rendering before loading.

Your lesson

Store expenses under the key "expenses" as a JSON string of an array of { title, amount } records (keys in this order, amount is a number). On start load from labStorage (null → []) and show li "<title>: <amount>" in #list. On submit add a record, save the whole array, and refresh the list. The host then reloads the page — the list must come back.

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><ul id="list"></ul>

The host does this after Run (in order):
1. setValue #title = "Food"
2. setValue #amount = "120"
3. submit #f

Initial window.labStorage contents:
{
  "expenses": "[{\"title\":\"Rent\",\"amount\":500}]"
}

After those steps the host reloads the page with the same labStorage and runs your code again — the DOM must show what was saved.

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

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": "[{\"title\":\"Rent\",\"amount\":500}]"
}

Load → change → save the whole array → render. A reload goes through the load.

lesson_07.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 2 rows after the reload

02#list is "Rent: 500Food: 120"

03key expenses holds both records

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