记录类工具的数据结构与本地存储
一条记录由若干字段构成,动手之前先定字段表。每条记录要有一个唯一编号,删除和修改都按编号定位。
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| id | 数字 | 是 | 这条记录的唯一编号,由程序生成,不给人填 |
| 金额 | 数字 | 是 | 保留两位小数,必须大于 0 |
| 分类 | 固定选项 | 是 | 餐饮/交通/学习/日用/其他,五选一,不让人手写 |
| 备注 | 文字 | 否 | 不超过 20 字,可以空着 |
| 时间 | 文字 | 是 | 记录时自动生成,不给人填 |
填得出三条示例数据,字段表就写完了。填不出,说明还没想清楚要记什么。
一件事记一次,就是一条记录。列表里的一行。
记录里的每一项,如金额、分类、备注。要先定好有哪几个、各是什么类型、哪些必填。
每条记录独有的编号,由程序生成,不给人填。
删除时找"列表的第 2 行"
列表一排序就删错
删除时找"编号为 …7718 的记录"
怎么排都删对
验法:记两条内容完全相同的记录,删第二条,看删掉的是哪一条。删对了是按编号定位,删错了是按行号。
对数据的操作只有增、删、改、查四种。AI 常常只做增和查,删和改要逐个点名。
对数据的四种操作:增(记一笔)、删(划掉一笔)、改(改一笔)、查(看列表与汇总)。CRUD 这四个字母在数据库、后台系统、接口文档里经常出现。
"做一个记账本"
只有新增和查看,改和删找不到入口
"新增、删除、修改、查看四种都要能用"
四种都有入口,验收时逐个点一遍
数据为零时的界面叫空状态,需要专门设计。空状态要写清现在没有数据和下一步点哪里。
数据为零时的界面。第一次打开、记录全部删光时都会出现。
需求里只写有数据时的样子
第一次打开一片空白,分不清是没有数据还是坏了
"一条记录都没有时,显示'还没有记录,点右下角添加'"
一句提示加一个入口
数据存进浏览器的本地存储(localStorage),关掉浏览器也不丢。存入前打包成文字,取出后还原成记录。
浏览器给每个来源留的一块存储空间(演示里叫"抽屉"),只能存文字,关掉浏览器也不丢。只在这台电脑的这个浏览器里。
程序运行时放在内存里的数据。刷新页面就清空。
// 本地存储里那一格的名字,起一个别人不会重名的 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(); }
| 这一行 | 作用 | 写错或漏掉的后果 |
|---|---|---|
| var KEY = 'myExpense2026' | 本地存储里那一格的名字 | 起成 records、data 这类通用名,别的作品会覆盖你的数据(见 7.6) |
| s ? JSON.parse(s) : [] | 第一次打开时没有数据,给一个空清单 | 少了后半句,第一次打开直接白屏,什么也点不了 |
| id: Date.now() | 用当前时刻的毫秒数当编号,两条记录不会重复 | 不给编号,删除只能按第几行,列表一排序就删错 |
| filter(… r.id !== id …) | 按编号筛掉那一条,剩下的存回去 | 漏了存回去,页面上删掉了,刷新又回来 |
"能记账、能删除"
AI 把数据存在页面变量里,刷新一次全没了
"数据保存在浏览器的 localStorage 里,关掉浏览器再打开数据还在"
关掉浏览器重开,记录还在
按 F12,在应用面板里能看到每一格的键和值。数据落在硬盘上的文件里,以明文保存,没有加密。
本地存储的每一格有一个名字(键)和一段内容(值)。键就是代码里 KEY 的值。
数据不加密直接保存,能打开这台电脑的人就能读到。不愿被别人看到的内容,不要交给本地存储。
| 方法 | 怎么做 | 看到什么 |
|---|---|---|
| 开发者工具 | F12 → 顶部标签「应用」(Application)→ 左侧展开「本地存储空间」 | 一张两列表:键、值。双击值可以直接修改,选中一行按删除键删掉整格 |
| 硬盘文件 | 把下面的路径复制进文件资源管理器的地址栏,回车(AppData 默认隐藏,不用改系统设置) | 000005.log、CURRENT、LOCK、MANIFEST 等文件。这是一个数据库,这个浏览器里打开过的所有页面存的东西都混在里面 |
Chrome C:\Users\你的用户名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb\ Edge 把中间的 Google\Chrome 换成 Microsoft\Edge,其余一样
直接打开 leveldb 里的文件
打不开,或看到的是旧内容(LOCK 文件锁着)
退出后再用记事本打开最大的 .log
乱码里夹着能读的字:键名、金额、分类、备注
在面板里把值改坏,刷新页面
直接白屏
在面板里把值改坏,刷新页面
当成空数据,从头开始
本地存储按浏览器和来源分格。双击打开的本地文件共用 file:// 这一格,只靠键名区分。
本地存储按来源分格:不同浏览器各有一套,不同网站各占一格,彼此读不到。
所有双击打开的本地文件共用的一格,里面的数据只靠键名区分。
var KEY = 'records';
同一台电脑上的另一个作品把你的数据覆盖掉
myExpense2026,或加上自己的学号
各占一格,互不干扰
| 问题 | 回答 | 原因 |
|---|---|---|
| 能让数据存到作品所在的文件夹里吗 | 不能 | 网页无权决定自己的数据落在硬盘哪儿。如果网页能随便往硬盘写文件,随便打开一个网页都可能改动你的东西 |
| 把硬盘上那几个文件发给同学,他能看到我的账吗 | 基本不能,也不该这么做 | 那是整个浏览器的数据库,跟浏览器版本和用户目录绑在一起 |
| 把 .html 发给同学,他打开是空的,是出错了吗 | 不是出错 | 作品和数据是分开的两样:作品是那个文件,数据在浏览器的本地存储里 |
要让数据也过去,只能让应用把数据导出成一份文件,发过去,对方用导入功能读进自己的浏览器。笔记软件、密码管理器、单机游戏存档都是这样做的。
数据可以存在三层:页面文件、本机浏览器、服务器。多人共用一份数据,必须经过服务器。
你看得见、点得到的那一部分。
替所有人保管数据、处理请求的那一部分。
运行后端的计算机,全天开机,有固定地址。
| 看这三个现象 | 数据在服务器上(如外卖软件) | 数据在本机浏览器(如本章记账本) |
|---|---|---|
| 打开要不要联网 | 要 | 不要 |
| 提交要不要联网 | 要 | 不要 |
| 换台设备登录,数据还在不在 | 在 | 不在 |
先让 AI 交字段表,确认之后再要页面。需求单各行按颜色对应写进第二步提示词。
| 提示词中的规定 | 缺少时的表现 | 代码中的对应 |
|---|---|---|
| 保存在 localStorage 里 | AI 把数据存在页面变量里,刷新一次全没了 | localStorage.setItem() |
| 键名固定写成 myExpense2026 | 用 records 这种通用名字,和同一台电脑上别的作品互相覆盖 | var KEY |
| 四种都要能用 | 常常只做新增和查看,改和删找不到 | del() edit() |
| 按编号定位,不按第几行 | 按行号删,列表一排序就删错 | r.id !== id |
| 一条记录都没有时显示那一句 | 第一次打开一片空白,使用者以为做坏了 | if(!list.length) |
先写字段表,再用 AI 生成。四种操作、三个存储实验逐一截图,成果即作业 2。
先不用 AI。每个字段写清名称、类型、必填与否、是不是固定选项;填得出三条示例数据才算写完
产出:字段表让 AI 先交字段表,和自己那张对一遍。对不上的当场改定,例如把填空字段改成固定选项
产出:确认过的字段表按确认的字段表生成并另存。键名起一个别人不会重名的,不用 records、data
产出:能打开的工具增、删、改、查各点一遍,各截一张图。删的时候记两条一样的,删第二条,看删掉的是哪一条
产出:四张操作截图刷新一次数据还在;关掉浏览器重开数据还在;换一个浏览器打开是空的
产出:三张实验截图按 F12 打开「应用」面板,截一张能看清键名和值的图;把值改坏再刷新,看程序有没有当成空数据从头开始
产出:面板截图与一句结论| 操作 | 应得结果 | 实际结果 |
|---|---|---|
| 记两条内容相同的,删第二条 | 删掉的是第二条 | |
| 按 F5 刷新 | 记录还在 | |
| 完全退出浏览器,重新打开文件 | 记录还在 | |
| 换一个浏览器打开 | 是空的 | |
| 在面板里把值改坏,再刷新 | 当成空数据从头开始,或白屏(如实记录) |
标黄一行是正常现象:本地存储按浏览器分格,不是出错。
先按现象找到缺的那条要求,补进提示词后重新生成。
| 现象 | 原因 | 处理 |
|---|---|---|
| 刷新一次数据全没了 | 数据存在页面变量里,没进本地存储 | 写明"保存在 localStorage 里,关掉浏览器再打开数据还在",重新生成 |
| 只有新增和查看,改和删找不到 | 四种操作没有逐个点名 | 补一句"新增、删除、修改、查看四种都要能用" |
| 删掉的不是点的那一条 | 按第几行定位,列表一排序就错位 | 要求每条记录生成唯一编号,删改都按编号 |
| 页面上删掉了,刷新又回来 | 改了内存里的清单,没有存回本地存储 | 要求每次增删改之后都重新写入一次 |
| 第一次打开是一片空白 | 没设计空状态 | 补一句"一条记录都没有时显示提示与入口" |
| 同学的作品把我的数据覆盖了 | 两个作品用了同一个键名,本地文件共用一格 | 把键名改成别人不会重名的,例如加上自己的学号 |
| 换一个浏览器打开是空的 | 不是出错:本地存储按浏览器分格 | 属于正常现象,截图作为实验结果 |
| 发给同学,他打开是空的 | 不是出错:作品和数据本来是分开的两样 | 要让数据也过去,做导出与导入,见选做 |
| 数据删了想找回来 | 这一版没有回收站 | 验收时用示例数据,不要拿真实账目试 |
本次上机的成果就是作业 2:提交四项内容,按八条标准验收。
| 标准 | 要求 | 验法 |
|---|---|---|
| 字段表齐全 | 每个字段写清类型、必填与否、是不是固定选项 | 照着表,在成品上逐个字段指出来 |
| 增删改查四种都能用 | 四种操作在界面上都找得到入口 | 四种各点一遍,都要有反应 |
| 删的是你点的那一条 | 按编号定位,不按第几行 | 记两条完全相同的,删第二条,看删掉的是哪一条 |
| 刷新之后数据还在 | 本章的及格线 | 按 F5 刷新一次,看列表还在不在 |
| 关掉浏览器重开数据还在 | 真正存进了本地存储,不是页面变量 | 完全退出浏览器,重新打开这个文件 |
| 一条都没有时有提示 | 写清现在没有东西,以及下一步点哪里 | 把记录全删光,看那一屏是什么样 |
| 键名不是通用词 | 不用 records、data、list 这类名字 | 在代码里找到那一行,看名字够不够特别 |
| 断网也能用 | 不引用任何网上的资源 | 断开网络连接刷新,再记一笔 |
按教师提供的作业模板(Word)填写,文档开头注明所选题目。提交渠道见课堂通知,当堂提交。
零代码应用开发 · 第 7 章 让它会存