L16. Make the app remember

Allow 35–45 minutes to give My Day a web address and check that it saves your choices. You need the seven files from lesson 15 and the GitHub account set up in lesson 14. We publish the program files; selections stay in your browser and do not change the files on GitHub.

An open page loses its working memory when it reloads. To restore the selections, our code writes them to localStorage, a small browser store for a website’s data. Records survive normal browsing sessions, but do not sync between devices. Clearing site data deletes them. Behaviour at file: addresses is not consistently defined, so the supplied example disables saving there. We will test at an HTTPS address. [B207]

In class

The teacher will open the same app in two browsers. Together, we will track which selections survive closing a tab and explain why another browser does not share them.

Give the app a web address

• Open https://github.com/new while signed in. Create a repository named my-day: Public, Add README, Create repository. This is a separate project; personal-site remains in place.
• On Code, choose Add file → Upload files. Drag the seven files listed in lesson 15 from Documents\AI-practice\my-day. They must appear at the top level, without an extra enclosing folder.
• Enter the message Add My Day app, choose a direct commit to main, then Commit changes. In Settings → Pages, select Deploy from a branch, main, /(root) and Save. [B205][B206]
• After deployment, choose Visit site. The address should end in /my-day/. Bookmark it: tests must return to this app address rather than the local file.

Follow writing and reading

• In a normal, non-private window, choose Start a new day, then tick the first and third tasks. Expect “Completed 2 of 3” and “Your choices are saved in this browser”.
• Reload. The first and third ticks should remain. Close the tab, reopen the app from its bookmark and check again.
• Open the same address in another browser where you have not used the app before. All three tasks start unchecked. This demonstrates the storage boundary: Edge and Chrome do not share our selections. The app on a phone will start separately too.

[[VIS:b5_app_storage]]

Find saveChoices in the supplied app.js. It is a function, a named piece of code that performs a job. Inside it are these JavaScript lines:

const done = boxes.map(box => box.checked);
localStorage.setItem(key, JSON.stringify(done));

The first line collects three values: true means checked and false means unchecked. The second converts the list into JSON, a text format for values, and saves it under the name held in key. With the first and third tasks selected, the text is [true,false,true]. When the app opens, it converts the text back to a list and restores the checkboxes.

• Choose Start a new day, then reload. “Completed 0 of 3” should remain: the button changes both the display and the saved values. Tick one task again to leave a visible result from this lesson.

If your generated version does not save

Send the AI your complete app.js and the focused request below. The supplied example already implements this behaviour.

> [PROMPT]

> Check my app.js. After each checkbox change and the new-day button, save exactly three Boolean values to localStorage. On opening, read and validate the list before applying it. Show a message if storage fails, but keep the checkboxes usable. Currently, reloading gives me 0 instead of 2. Find the cause and return the complete corrected file without changing the task names.

Save the complete corrected app.js over the old file in your local folder. Before testing over HTTPS, follow “Updates after installation” in lesson 17: change the cache version in sw.js, save it and upload both changed files in one commit. Wait for deployment and open the new version using that procedure. Then repeat steps 5–6. This also applies to an ordinary browser tab.

> [FIX]

> If the supplied example reports that changes were not saved, check that you are using HTTPS, a normal browsing window, and a browser that allows this site to store data. After restoring permission, change one checkbox: that action tries the write again. Do not clear all browser data merely to perform this check.

Home practice

• Create Documents\AI-practice\storage-home.txt. Predict what will happen to selections after closing the whole browser, rather than just a tab.
• In the published app, start a new day and select only the third task. Save other open work, close the browser, then reopen the app from its bookmark.
• Record your prediction, the actual checkboxes and count. Success means exactly the third selection and 1 return. Explain in one sentence why another phone need not show the same state.

Self-test

• Only the middle task was saved. What should return after reloading, and what is the three-value list?
• Why does another phone not show your selections?
• Is localStorage a backup for important records?

Terms

• localStorage: browser storage for small pieces of a website’s text data.
• JSON: a text format for structured values.
• Function: a named piece of code you can call to perform a job.