第5课：保存数据是什么意思

区分临时显示和持久保存，理解刷新后还能找回来才叫真的保存。

本课目标

第 5 课开始进入第二册真正的核心能力：

让小工具能保存数据。

本课不急着写代码。

本课先让你理解一句话：

页面上看见内容，不等于内容已经保存。
刷新页面后还在，才叫真的保存了。

本课结束时，你要完成一张“数据保存方式选择表”，为第 6 课加历史记录做准备。

开始之前

你第一册做的小工具，可能已经能做到：

输入一段内容。
点击按钮。
生成结果。
页面显示结果。

这很好。

但现在要问一个更严格的问题：

刷新页面后，这个结果还在吗？

如果不在，它只是临时显示。

如果还在，才说明它被保存到了某个地方。

一个小故事

小林做了一个“学习计划生成器”。

他输入：

我想 7 天学会 Excel 常用函数。

页面生成了一份计划。

小林很高兴。

他关掉电脑，第二天重新打开项目。

结果昨天的计划不见了。

小林说：

这个工具坏了，它昨天明明生成过。

但工具不一定坏。

它可能只是没有保存历史记录。

昨天那份计划只是显示在页面上。

页面刷新、关闭或重新打开后，它就消失了。

这就是本课要讲的第一句话：

看见了，不等于保存了。

临时显示是什么

临时显示可以先理解成：

内容只暂时放在当前页面里。

比如：

输入框里的文字。
刚刚生成出来的结果。
页面上临时展开的提示。
AI 返回后显示在结果区域的内容。

这些内容可能只存在于当前页面状态里。

只要刷新页面，它就可能消失。

临时显示不是坏事。

很多第一版小工具一开始都是这样。

但你要知道它的边界：

临时显示适合马上看，不适合长期保存。

持久保存是什么

持久保存可以先理解成：

内容被放到了刷新后还能找回来的地方。

这个“地方”可能是：

浏览器本地存储。
本地文件。
本地数据库。
云数据库。
服务器上的数据库。

本课不要求你全部学会。

你只需要先知道：

保存一定有一个保存位置。

如果 AI 说“我已经保存了”，你要问：

保存到哪里了？刷新页面后还能看到吗？

最重要的测试：刷新页面

判断是否保存，最简单的动作是：

刷新页面。

测试步骤：

1. 输入内容。
2. 生成结果。
3. 保存或让它自动保存。
4. 刷新页面。
5. 看刚才的内容还在不在。

如果还在，说明它至少保存到了某个地方。

如果不在，说明它可能只是临时显示。

这就是第二册最重要的验收动作：

刷新后还在。

保存在哪里：先认识 4 种位置

保存位置	大白话理解	适合什么时候
页面临时状态	当前页面能看到，刷新后可能消失	第一册最小演示
浏览器本地存储	保存在你这台电脑的这个浏览器里	第二册第一版历史记录
文件保存	把数据写进一个文件里	本地项目更正式的记录
数据库保存	专门用来存、查、改、删数据的地方	多用户、登录、同步、正式项目

第二册第一版推荐：

优先用浏览器本地存储。

为什么？

不需要登录。
不需要服务器。
不需要云数据库。
刷新后可以验收。
能让你理解“保存”的意义。
范围足够小，AI 不容易越做越大。

但要讲清限制：

它通常只保存在当前浏览器。
换电脑可能看不到。
清理浏览器数据后可能消失。
不适合保存特别重要或敏感的数据。

这已经足够作为第二册练习。

判断保存方式前，先回答 6 个问题

不要一上来问 AI：

帮我加数据库。

先回答：

问题	我的答案
我要保存什么
谁需要看到
刷新后要不要还在
换电脑要不要还在
别人要不要也能看到
有没有敏感信息

对第二册学生来说，默认答案通常是：

只给我自己看。
只要当前电脑当前浏览器能保存。
刷新后还在就行。
先不要登录。
先不要多人共享。
先不要云数据库。

这就是一个很好的小白项目边界。

课堂活动：刷新测试

请打开你第一册做的小工具。

按照下面步骤做：

1. 输入一段内容。
2. 生成一个结果。
3. 不要复制到别的地方。
4. 直接刷新页面。
5. 看结果还在不在。

把结果写下来。

项目	我的记录
我测试的小工具
我输入的内容
页面生成的结果
刷新后结果还在吗
如果不在，我猜它目前属于	页面临时显示 / 不确定
如果还在，我想问 AI 它保存到了哪里

如果刷新后不在，不代表工具失败。

它只是还没有做保存功能。

找出要保存的数据

一个小工具里，不是所有东西都要保存。

比如“学习计划生成器”可以保存：

原始输入。
生成结果。
生成时间。
自己加的备注。

但不一定要保存：

按钮颜色。
页面标题。
当前光标位置。
临时加载状态。

请填写：

问题	我的答案
我的工具名称
最重要的输入是什么
最重要的输出是什么
我希望保存哪些内容
哪些内容不用保存
每条记录是否需要时间
每条记录是否需要标题
是否需要删除记录

这张表会直接用于第 6 课。

数据保存方式选择表

1. 我要保存什么

项目	我的选择
我要保存的内容
每条记录包含哪些字段
是否需要保存原始输入	是 / 否
是否需要保存生成结果	是 / 否
是否需要保存时间	是 / 否
是否需要保存备注	是 / 否

2. 谁需要看到

问题	我的答案
只给我自己看吗
是否需要别人也能看到
是否需要换电脑也能看到
是否需要登录
是否需要多人协作

3. 保存位置选择

选择	我的填写
这一版选择	页面临时显示 / 浏览器本地存储 / 文件保存 / 本地数据库 / 云数据库
我的选择理由
这一版先不做什么

4. 验收动作

问题	我的答案
我准备怎样测试保存成功
刷新后应该看到什么
删除一条记录后应该发生什么
清空记录后应该发生什么

给 AI 的一句话

判断当前有没有保存

我想理解这个项目目前有没有保存数据。
请你先不要改代码。
请帮我判断：
1. 当前页面上的结果是否会真正保存；
2. 刷新页面后内容为什么会消失或保留；
3. 当前项目有没有使用 localStorage、文件、数据库或其它保存方式；
4. 如果我要加历史记录，最简单的保存方式是什么；
5. 这一版先不要做登录、云数据库和复杂后台，是否合理。
请用小白能听懂的话解释。

选择最小保存方式

我想给这个小工具增加保存功能，但请先不要改代码。

我的工具用途：

我要保存的内容：

谁需要看到：

是否需要换电脑也能看到：

是否需要登录：

请帮我判断：
1. 这一版是否适合先用浏览器本地存储；
2. 这样做的优点是什么；
3. 这样做的限制是什么；
4. 如果以后升级，可能会升级到什么保存方式；
5. 第 6 课真正实现时，最小功能范围应该是什么。

本课小结

本课你要记住三句话：

页面上看见了，不等于保存了。
刷新后还在，才叫真的保存了。
保存一定要知道保存到哪里。