A useful local tool

This lesson is still being tested: it improves with learners' feedback. If something is unclear, it is the lesson that needs fixing, not you.

By the end of this lesson, you will be able to

have a tool built from your specification;
understand where its data is, and what can erase it;
plan a backup that you can export and import again;
check every criterion yourself.

Why it matters to you

A page that displays information is nice. A tool that keeps your data from one time to the next is what changes your daily life: a loan logbook, a tracking list, a small calculation that keeps coming back. This lesson builds one in a single file, with no server and no account. But a tool like this has a limit you need to know before trusting it with anything: its data lives in your browser.

Before you start


You need	Claude Code (app or terminal), in Manual mode, your specification (lesson 1), and a browser
Cost	The agent subscription: Claude Pro at minimum, €18 per month excl. VAT billed monthly, or €15 per month excl. VAT with the annual plan of €180 paid up front; prices shown on claude.com/pricing on 24/10/2026
Duration	90 minutes
Reminder	Test with made-up data, never with someone’s real information

Understand it in 3 minutes

Where is the data? A single-file tool, with no server, often keeps its data in the browser’s local storage. According to MDN (the reference documentation for the web, 24/10/2026), this data is kept between browser sessions and has no expiration date. But:

it is tied to that browser, on that computer: another browser or another computer will normally show an empty tool (for a page opened from a file, the exact behavior depends on the browser: in our test on 28/10/2026, Chrome gave the same storage to every page opened from a file, so ask the agent to give each of your tools its own storage name);
in private browsing, it is erased when the last private tab is closed;
clearing browsing data erases it too.

Hence the backup. An “Export” button that saves a file, an “Import” button that loads it again. It is your copy, to be stored with your other copies (module 5, lesson 6).

Build, then check. The agent builds according to the specification. You check each criterion under “It worked if”, one by one. Ask it how to check each one: it is a list of tests to run.

Do it together

1Step 1: Build

In Claude Code, on your project folder, in Manual mode:

Read specification.md. Build the minimum version in a single file, [name].html, exactly according to the specification.
No library, nothing loaded from the Internet. Do not create any other file.
Then tell me how to check each criterion under "IT WORKED IF" myself, in 1 line per criterion.

In our test on 24/10/2026, for the club’s loan logbook, the agent built a file of 382 lines, with no library, and gave one test per criterion (for example: “Record 3 loans and mark 1 as ‘Returned’: the list shows exactly 2 rows”).

2Step 2: Check every criterion

Open the tool with a double-click (lesson 2). Do each test from the list, with made-up data, and tick it off.

In our test, we ran these checks automatically, in a real browser (Chromium), opening the file as if by double-click: all the criteria passed, including “no request to the Internet” and a 15-day-old loan marked as late, but not the 14-day-old one. After closing and restarting the browser, the loans were still there.

3Step 3: The backup, for real

Click Export a backup: a .json file arrives in your downloads folder (or your browser asks where to save it, depending on its setting).
Store it in your folder of copies.
To practice: open the tool in another browser (the logbook is empty there), then Import the file. Everything should come back. Without a second browser: delete your test loans one by one, with your tool’s delete button, then import the file. Do not clear the browsing data of your whole browser to do this: it also erases cookies and the data of other sites.

In our test, the erasing was done by a test script: 2 loans, then 0 after erasing, then 2 again after the import.

4Step 4: Understand the tool

Explain [name].html to me in 6 lines, without jargon: where the data is saved, what happens when I click each button, and what could erase the data. Do not change anything.

To compare with a finished result, you can open the loan logbook example (resources): it is the tool built during our test.

Your turn

Have your tool built from your specification.
Check each criterion, with made-up data, and tick them off in the specification.
Make an export, store it, and practice importing it again.
Write in your journal: where the data is, and how to back it up.

Resources to download

Example: the club’s loan logbook: the tool built during our test (made-up data, nothing loaded from the Internet).

Check your work

It worked if:

the tool opens with a double-click and meets every criterion of your specification;
you checked every criterion yourself, with made-up data;
an export, then an import, bring back all the data;
you can say what can erase the tool’s data.

Common mistakes:

believing the agent when it says “everything works”, without checking;
testing with someone’s real data;
using the tool in private browsing, and losing everything when you close it;
never exporting a backup.

Keep it and pick it up later

Export a backup after each important session of use, and store it with your copies.
Save a version of the tool that works (lesson 5).

Going further

optional

A tool shared between several people (each sees the same data) requires a server and a database: it is another level, with costs, accounts and personal data to protect. Always start with the local version.

New words

4 words explained

Word	What it means
Local storage	The space where the browser keeps a page’s data, on your computer
Export	Save the tool’s data in a file
Import	Load the data again from that file
Made-up data	Examples unrelated to real people, used for testing

The build and the checks in steps 1 to 3 were actually run with Claude Code 2.1.310, then in headless Chromium (test report, T54). The test sessions with Claude Code were run in non-interactive mode (claude -p), once each: what you see may differ (permission requests, wording, number of questions). Persistence after restarting the browser was also checked in WebKit, the engine of Safari (T64). To be checked: the tool was not tried in Safari itself, nor in Firefox or Edge; according to MDN, local storage can cause problems when the page is opened from a file, depending on the browser.