让它会存

1.1本章成品：《这个月我花了多少》

记一笔支出：金额、分类、备注。列表显示，底部实时汇总。关掉浏览器再打开，记录还在。

打开 第07章演示_记账本.html 试一次，再打开 第07章演示_没存下来.html 试一次。两个页面长得一模一样，操作也一样，区别只在刷新之后：前者记录还在，后者一条不剩。这一章要补上的就是这个差别。

1.2字段表：一条记录长什么样

动手之前先回答一个问题：一条记录由哪几个字段构成，每个字段是什么类型，哪些必填。这张表定错，后面每加一个功能都要返工。

1.3本章新技巧：先要中间产物，再要成品

直接要成品，你只能在做完之后才发现字段设计错了。让它先交一张字段表，你确认了再往下走。

这个做法在往后每一次涉及数据的任务里都用得上：先要那份能一眼看懂、改起来只要一行字的中间产物，确认之后再要那份改起来要动一整页的成品。

1.4可直接复制的提示词

1.5大模型的常见偏差

// 抽屉里的格子名。起一个别人不会重名的名字，这一行不是随手写的
var KEY = 'myExpense2026';

// 取：从抽屉里拿出那段文字，还原成一串记录；第一次打开时是空的
function load() {
  var s = localStorage.getItem(KEY);
  return s ? JSON.parse(s) : [];        // 没有就给一个空清单，不要让它崩
}

// 存：把一串记录打包成文字，放回抽屉
function save(list) {
  localStorage.setItem(KEY, JSON.stringify(list));
}

// 增：生成一个唯一编号，插到最前面
function add(amount, cat, note) {
  var list = load();
  list.unshift({ id: Date.now(), amount: amount, cat: cat, note: note, time: nowText() });
  save(list); render();
}

// 删：按编号筛掉那一条，不是按第几行
function del(id) {
  var list = load().filter(function (r) { return r.id !== id; });
  save(list); render();
}

3.1办法一：按 F12，用浏览器自带的面板看

在记账本页面上按 F12，找到顶上那排标签里的应用（英文界面是 Application），左侧展开本地存储空间，点进去，右边就是一张两列的表。

左边那一列的名字，就是代码里 KEY 那个变量的值。所以两个作品各占一格，互不干扰。右边那一列，就是打包之后的那段文字，原样躺在这里。

3.2办法二：到硬盘上把那个文件找出来

浏览器不是把数据变没了，它落在一个真实存在的文件夹里。以 Windows 为例，把"你的用户名"换成自己的：

两个浏览器的路径只差中间那一段厂商名。这一眼就能看懂什么叫存储隔离：它们压根就是两个文件夹。

AppData 默认是隐藏的，不用去改系统设置：把上面那行路径复制进文件资源管理器的地址栏，回车就能进去。

进去之后看到的是一堆名叫 000005.log、CURRENT、LOCK、MANIFEST 的文件，没有一个叫"我的记账本"。这里存的不是一人一份的文档，而是一个数据库，你在这个浏览器里打开过的所有页面，存的东西全在这几个文件里混着。

用记事本打开最大的那个 .log 文件，会看到一片乱码里夹着能读的字：myExpense2026、金额、分类、备注。那几段就是你的数据。

3.3另外两个知识点

3.4三个紧接着会冒出来的问题

想让数据也过去，正路只有一条：让应用自己把数据吐出来，变成一份你拿得动的文件，发过去，对方用导入功能读进他自己的抽屉。真实世界里的本地工具，笔记软件、密码管理器、单机游戏存档，走的全是这条路。上机的选做就是加这个功能。

4.1数据可以存在三个地方

打开 第07章演示_存储三层.html，选一种存法，再选一种情境，页面会告诉你数据还在不在。三种存法的脾气，一次就试完了。

第三层这一版到不了。你在你的浏览器里记，我在我的浏览器里记，两边之间没有任何通道。这条边界不是缺陷：单人用的工具，第二层足够。

4.2第八个知识点

怎么判断一个软件的数据在第几层，有三个现象可以看：打开要不要联网、提交要不要联网、换台设备登录数据还在不在。三个都是要，那它的数据在服务器上，不在你的手机里。

4.3前沿三分钟：数据存在哪里，是一道选择题

5.1三个题目，任选其一

三个题目都要求增删改查四种操作齐全、有空状态、关掉浏览器再打开数据还在。允许更换题材，验收标准不变。

5.2上机六步

5.3共同验收标准

5.4常见错误与处理

5.5提交内容

提交方式：按教师提供的作业模板（Word）填写，文档开头注明所选题目。提交渠道见课堂通知。当堂提交。

5.6再进一步（选做）

给你的工具加一对导出与导入：导出把当前所有记录变成一段文字或一个文件，导入把它读回来。

加完之后，把导出的那段东西发给同组同学，让他在自己的电脑上导入。这是本地存储唯一的正路：数据不会自己跟着作品走，要让应用把它吐出来，你才拿得动。