Earlier quoted context omitted.
The problem is that you can't save the user data in way that you can click a single file, similar to a Word or Excel file. I you think a about it, a Excel spreadsheet is also just UI + data in a single file.
This is a frustration of mine as well, but I vaguely remember someone showing something on HN where the file could essentially save itself, I think they were using some file APIs for that... sadly I can't find the details anymore. But I keep running into the "HTML file opened locally can't update itself" issue repeatedly now that I build tools for myself with LLM agents.
However, every browser will let you download a new version of the HTML file and save it over the old one - yes, even from a local HTML file:
const blob = new Blob(['\n' +
document.documentElement.outerHTML],
{ type: 'text/html' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'mypage.html';
a.click();