别再手写localStorage了！用CodeX自动生成“班级积分系统”，小白也能秒上手！-北京尧图网络

1. 为什么手写 localStorage 总在刷新后翻车班级积分系统这个需求看起来简单真正动手写的时候坑特别多。我见过太多老师或者刚学前端的朋友用记事本手写一个 HTML加减分按钮点着挺爽结果一按 F5所有积分归零学生名单也没了。问题就出在 localStorage 的读写时机和数据结构设计上。localStorage 是浏览器提供的一个本地存储对象它把数据以键值对的形式存在用户电脑里除非主动清除否则刷新页面、关掉浏览器再打开都还在。听起来很美好但它有两个硬性限制第一存进去的只能是字符串你没法直接把一个数组或者对象塞进去第二它是同步操作如果每次点击按钮都全量读写学生数量一多就会卡顿。所以正确的做法是维护一份内存中的学生数组每次修改后调用一次保存函数把数组序列化成 JSON 字符串再写入 localStorage。对于零基础读者来说手写这套逻辑的难点在于你得同时理解 DOM 操作、事件绑定、数组方法、JSON 序列化、以及 localStorage 的 API。任何一个环节写错要么按钮没反应要么数据存不进去。而 CodeX 这类 AI 编程工具的价值就在于你只需要用自然语言把需求描述清楚它就能生成结构完整、逻辑自洽的代码你负责验证和微调。这篇文章面向的是完全没有编程经验的读者我会带你用 CodeX 从零生成一个班级积分系统包含 HTML 页面、localStorage 持久化、积分加减、排行榜和重置功能。更重要的是我会告诉你如何通过 TaoToken 统一 Key 和 API 通道接入 CodeX让你在国内网络环境下也能稳定调用。整个流程不需要你理解每一行代码但你需要跟着步骤操作并在浏览器里逐项验证积分写入和刷新后数据保留是否正常。我试过用不同的提示词让 CodeX 生成同类系统发现提示词里把功能点拆得越细生成结果越接近可直接使用的状态。下面我会给出一个经过实测的提示词模板你可以直接复制使用。2. TaoToken 前置统一 Key 与 API 通道接入 CodeXCodeX 是 OpenAI 推出的代码生成工具它本身是一个命令行程序安装后需要配置模型提供方的 API 地址和密钥才能工作。默认情况下它指向 OpenAI 官方接口但国内网络直接访问会遇到连接问题。TaoToken 的作用就是提供一个统一的 API 通道你只需要在 TaoToken 申请一个 Key然后把 CodeX 的配置文件指向 TaoToken 的接口地址就能正常调用模型生成代码。这里需要先理清三个概念。第一是 Base URL也就是 API 请求的根地址TaoToken 的 API 地址是https://taotoken.net/api注意这个地址后面不加任何路径CodeX 会根据 wire_api 的配置自动拼接。第二是 API Key你在 TaoToken 控制台创建后复制出来它是一串以sk-开头的字符串用来标识你的身份和计费。第三是 Model ID也就是你要调用的模型名称CodeX 场景下推荐使用gpt-5-codex或者gpt-4o具体取决于你在 TaoToken 控制台看到的可用模型列表。如果你还没有 TaoToken 账号可以先访问官网了解服务内容注册后在控制台左侧找到 API Keys 菜单点击创建新的密钥。创建时建议给 Key 起一个容易识别的名字比如codex-class-points方便后续管理。复制出来的 Key 只显示一次务必先粘贴到记事本备用。接下来是安装 CodeX 本身。CodeX 是一个 Node.js 包所以你的电脑上需要先有 Node.js 环境版本要求大于 18。你可以打开终端或命令提示符输入node -v查看当前版本。如果低于 18 或者提示命令不存在就去 Node.js 官网下载对应系统的安装包一路下一步安装即可。安装完成后重新打开终端再次确认版本号。Node.js 就绪后执行全局安装命令npm i -g openai/codex安装完成后输入codex --version如果能看到版本号输出说明 CodeX 已经装好了。第一次运行codex命令时它会在你的用户目录下创建配置文件夹。Windows 系统一般是C:\Users\你的用户名\.codexmacOS 和 Linux 是~/.codex。如果这个目录不存在你先在终端里执行一次codex看到它提示需要配置或者直接进入交互界面后按 CtrlC 退出目录就会自动生成。进入.codex目录你需要创建两个文件config.toml和auth.json。config.toml 用来告诉 CodeX 使用哪个模型提供方、接口地址是什么auth.json 用来存放你的 API Key。这两个文件的格式和路径必须完全正确否则 CodeX 启动时会报错。下一节我会给出可直接复制的配置内容。3. 可复制配置config.toml 与 auth.json 完整片段这一节是整个接入流程的核心你需要把下面的配置片段原样复制到对应文件中。先确认你的.codex目录路径Windows 用户可以在文件资源管理器地址栏输入%USERPROFILE%\.codex快速跳转macOS 用户在 Finder 中按CmdShiftG输入~/.codex。首先是config.toml文件。如果目录里没有这个文件用记事本或者 VS Code 新建一个文件名就叫config.toml注意扩展名是.toml不是.txt。内容如下model gpt-5-codex model_provider taotoken preferred_auth_method apikey [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api wire_api responses这里逐项解释一下。model指定你要调用的模型 ID如果你在 TaoToken 控制台看到的模型名称不是gpt-5-codex就替换成实际可用的名称。model_provider是一个自定义的提供方标识你可以叫它taotoken也可以叫别的只要和下面[model_providers.taotoken]中的名称一致即可。preferred_auth_method设置为apikey表示使用 API Key 认证。base_url就是 TaoToken 的 API 地址注意这里写的是https://taotoken.net/api不要在后面加/v1或者其他路径CodeX 会根据wire_api自动处理。wire_api设置为responses这是 CodeX 与模型提供方之间的通信协议格式。接下来创建auth.json文件同样放在.codex目录下。内容如下{ OPENAI_API_KEY: sk-你的TaoToken密钥 }把sk-你的TaoToken密钥替换成你在 TaoToken 控制台创建的真实 Key。注意 JSON 格式要求双引号Key 字符串不要有空格或换行。保存文件时确认编码是 UTF-8Windows 记事本默认可能是 ANSI建议用 VS Code 或者 Notepad 保存为 UTF-8 格式。两个文件都创建好后回到终端输入codex命令。如果配置正确你会看到 CodeX 启动并显示一个交互式界面提示你可以输入提示词。这时候你可以先输入一句简单的话测试比如用 JavaScript 写一个 hello world 函数看它是否能正常返回代码。如果返回了代码说明 API 通道已经打通。如果启动时报错最常见的是401 Unauthorized这通常意味着 auth.json 里的 Key 不正确或者已经失效。你可以回到 TaoToken 控制台重新创建一个 Key替换后重试。另一个常见错误是local proxy failed或者连接超时这可能是 base_url 写错了检查 config.toml 里的地址是否完全一致。还有一种情况是 CodeX 提示找不到模型那说明 model 字段的模型 ID 在 TaoToken 那边不存在去控制台确认可用模型列表。配置完成后你还可以通过 TaoToken 的模型对话功能先验证一下 Key 是否有效。访问模型对话页面选择对应的模型输入一段测试文本如果能正常返回结果说明 Key 和通道都没问题。这个步骤可以帮你排除是 CodeX 配置问题还是 Key 本身的问题。4. 生成班级积分系统提示词模板与浏览器验证配置好 CodeX 之后就可以让它生成班级积分系统了。提示词的质量直接决定生成代码的可用性。我实测下来把功能点拆成编号列表并且明确指定用 localStorage 做持久化生成结果最接近直接可用的状态。下面是我整理好的提示词模板你可以直接复制到 CodeX 的交互界面中请开发一个 HTML 页面实现一个页面清晰、科技化的班级积分系统。要求如下 1. 标题班级积分系统 2. 创建一个可容纳 55 个学生的表格学号从 1 到 55 固定显示每个学号后有文本框可输入学生姓名可新增、删除学生。 3. 每个学生行包含学号、姓名输入框、积分显示初始 0、加分按钮、减分按钮可一键给所有人加分或减分。 4. 加分按钮点击后该生积分 1减分按钮点击后该生积分 -1。 5. 使用 localStorage 存储学生数据学号、姓名、积分确保页面刷新后数据不丢失。 6. 添加积分排行查询按钮按积分大小进行排序显示。 7. 添加积分兑换功能选择学生对应的礼物进行兑换同时扣减相应的积分。 8. 积分礼物管理功能可新增礼物、删除礼物、修改礼物维护序号对应的积分。 9. 可设置皮肤预设几个常用风格的皮肤供用户选择。 10. 以 HTML 格式输出所有 CSS 和 JavaScript 内联在同一个文件中。把这段提示词粘贴到 CodeX 后回车它会开始生成代码。生成时间取决于模型响应速度通常十几秒到半分钟。生成完成后CodeX 会在终端里输出完整的 HTML 代码。你需要把这段代码保存为一个.html文件比如class-points.html。保存时注意不要漏掉任何一行尤其是script标签内的 JavaScript 逻辑。保存好文件后直接双击用浏览器打开。你会看到一个表格学号从 1 到 55 排列每行有姓名输入框、积分显示、加分和减分按钮。先测试基本功能在学号 1 的姓名框输入一个名字点击加分按钮积分应该从 0 变成 1。再点击减分变回 0。然后按 F5 刷新页面如果姓名和积分还在说明 localStorage 写入成功。接下来测试排行榜功能。给几个学生加上不同的积分然后点击积分排行按钮页面应该弹出一个按积分从高到低排序的列表。再测试礼物兑换先添加一个礼物设置所需积分然后选择学生进行兑换观察积分是否相应扣减。最后测试皮肤切换点击不同的皮肤按钮页面配色应该实时变化。如果生成的结果有缺失比如没有排行榜按钮或者 localStorage 没生效你可以把具体问题反馈给 CodeX让它修正。比如输入排行榜按钮点击后没有反应请检查排序逻辑并修复CodeX 会重新生成相关代码片段。你也可以直接把浏览器控制台的报错信息粘贴给它它能根据报错定位问题。这里有一个关键验证点刷新后数据保留。很多手写代码的问题出在保存函数没有被正确调用或者读取时没有做空值判断。你可以在浏览器开发者工具的 Application 面板中左侧找到 Local Storage展开你的页面域名应该能看到一个键值对键名可能是students或者类似的名称值是一段 JSON 字符串。每次点击加分减分这个值都应该更新。如果值没变说明保存逻辑没触发。5. 常见报错排查401、local proxy failed 与 reading choices在接入 CodeX 和生成代码的过程中你可能会遇到几类典型报错。这一节我把它们整理出来并给出对应的排查步骤。第一类是401 Unauthorized。这个错误几乎总是和 API Key 有关。首先检查auth.json文件中的 Key 是否完整复制有没有多余的空格或换行。然后确认这个 Key 在 TaoToken 控制台的状态是启用中没有过期或被删除。如果 Key 没问题再检查config.toml中的base_url是否写成了https://taotoken.net/api注意末尾不要加斜杠。有些用户会习惯性写成https://taotoken.net/api/v1这会导致路径拼接错误从而返回 401。另外如果你之前配置过其他提供方确认model_provider字段和[model_providers.xxx]中的名称完全一致大小写敏感。第二类是local proxy failed或者连接超时。这个报错说明 CodeX 无法连接到base_url指定的地址。先确认你的网络能正常访问 TaoToken 的 API 地址可以在浏览器里打开接入文档页面如果能正常加载说明网络通畅。然后检查config.toml中wire_api的值是否为responses如果写成了chat或者其他值可能导致协议不匹配。还有一种情况是本地防火墙或安全软件拦截了 Node.js 的网络请求你可以临时关闭安全软件测试或者把 Node.js 加入白名单。第三类是reading choices相关报错通常表现为 CodeX 返回的数据结构不符合预期提示无法读取choices字段。这往往是因为wire_api配置与 TaoToken 实际返回的格式不匹配。TaoToken 的 API 兼容 OpenAI 的 responses 格式所以wire_api应该设置为responses。如果你之前改成了chat改回来即可。另外如果模型 ID 写错了TaoToken 可能返回一个错误对象而不是正常的响应结构也会导致读取choices失败。去控制台确认模型列表把model字段改成实际可用的名称。第四类是 CodeX 启动后提示OAuth相关错误。CodeX 支持多种认证方式如果你之前用过 OAuth 登录可能会和 API Key 认证冲突。解决办法是删除.codex目录下的缓存文件只保留config.toml和auth.json然后重新运行codex。如果问题依旧检查preferred_auth_method是否设置为apikey。除了 CodeX 本身的报错生成的前端代码也可能有问题。比如点击加分按钮没反应打开浏览器控制台看是否有Uncaught TypeError常见原因是事件绑定在了不存在的元素上或者函数名拼写错误。把报错信息复制给 CodeX让它修复即可。如果刷新后数据丢失检查 localStorage 的键名是否在读取和写入时一致以及是否在页面加载时正确调用了读取函数。如果你在排查过程中需要确认 API 通道是否正常可以访问 TaoToken 的 API Keys 页面重新生成一个 Key 测试或者直接使用模型对话功能发送一条消息看是否能收到回复。模型对话能通说明 Key 和通道没问题问题就集中在 CodeX 的配置上。6. 从生成到落地长期编码与 Agent 场景的接入建议班级积分系统只是一个起点。当你熟悉了用 CodeX 生成代码、用 TaoToken 提供 API 通道的流程后可以把这套方法用到更复杂的场景里。比如你想做一个带后端数据库的版本或者把它改造成微信小程序甚至接入 Agent 自动批改作业核心逻辑都是一样的用自然语言描述需求让 CodeX 生成代码骨架你负责验证和调整。对于需要长期编码或者构建 Agent 的读者我建议关注 TaoToken 的 Coding Plan。它针对高频调用场景做了优化适合需要持续使用 CodeX 或者其他编程助手的情况。你可以在 TaoToken 控制台查看 Coding Plan 的详细说明根据自己的使用频率选择合适的方案。如果只是偶尔生成一些小工具按量计费的 API Key 就足够了。另外如果你在团队里推广这套流程可以把config.toml和auth.json的模板整理成文档让每个成员用自己的 Key 配置。注意不要把自己的 Key 提交到 Git 仓库或者分享给他人Key 泄露会导致额度被消耗。TaoToken 控制台支持创建多个 Key你可以给不同的项目或者不同的成员分别创建方便追踪用量。回到班级积分系统本身生成之后你还可以继续让 CodeX 帮你扩展功能。比如增加导出 CSV 的功能方便把积分数据导入 Excel或者增加一个历史记录面板记录每次加减分的时间和学生。这些需求只需要用自然语言描述给 CodeX它就能在现有代码基础上追加实现。你不需要从头重写只需要把现有代码和新的需求一起发给它。最后提醒一点生成的代码虽然能直接运行但涉及学生姓名等数据时注意不要在公共电脑上长期保存。localStorage 的数据存在浏览器里换一台电脑或者清除浏览器数据就会丢失。如果需要长期保存建议增加导出功能定期把数据备份到本地文件。这个需求也可以让 CodeX 帮你实现提示词可以写增加一个导出按钮点击后将学生数据下载为 CSV 文件。整套流程走下来你会发现最耗时的部分不是写代码而是配置环境和验证结果。一旦 CodeX 和 TaoToken 的通道打通后面就是不断描述需求、生成、验证的循环。对于零基础读者来说先跑通一个最小可用的版本再逐步加功能比一开始就追求完美要高效得多。

别再手写localStorage了！用CodeX自动生成“班级积分系统”，小白也能秒上手！

相关推荐

AI辅助编程工具(七) - Cursor 接入 TaoToken 统一 API 通道的配置与验证

Codex入门案例学习视频总结：用TaoToken统一Key跑通APP开发全流程

ContentProvider、Cursor与CursorAdapter三者内部链接实现原理解析TaoToken统一Key通道下的Android数据流

更多资讯

同城跑腿系统开发实战：Fastadmin+ThinkPHP与Uniapp三端搭建与避坑指南

SSM+Vue实战：银行贷款管理系统搭建、核心流程与避坑指南

Linux系统故障修复脚本：状态指纹诊断与原子化修复协议

震旦Generic 22BW-1驱动包深度解析：从文件清单到双面打印配置

macOS设备指纹重置：彻底清除Claude残留的三层次清洗指南

对大模型的思考

今日更新

基于sEMG与IMU的手语手势识别：从数据采集到实时部署避坑指南

装配车间MES落地指南：SimpleMES工单流转、BOM与齐套检查实战

AI获客怎样减少重复线索？意客AI的原文复用与版本筛选

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？