做一个笔记软件

做一个笔记软件——让数据存得住才算真App

📖知识引入

📝列表展示

笔记软件的核心是一个列表：每条笔记有标题、正文、时间戳。用JavaScript数组存所有笔记，循环渲染到页面上，增删改都重新渲染——和待办清单一个套路。

➕增删改三连

输入框+「新建」按钮=新增；每条后的「×」按钮=删除；点笔记标题=进入编辑模式改内容。这三个动作是所有笔记类App的标配，Notion、印象笔记都这套。

💾本地存储localStorage

刷新页面笔记就消失？因为只住在内存里！用浏览器内置的localStorage，把数组转成字符串存进浏览器，下次打开自动读取——无需后端，零成本数据持久化。

📄文件操作进阶

想把笔记导出成.txt？JavaScript可以用Blob和URL.createObjectURL生成文件下载。也可以做导入：用<input type="file">读取本地.txt加进笔记列表——文件读写不难。

🔍搜索与分类

笔记多了要能搜索：输入关键词实时过滤列表。可以用indexOf简单匹配，也可以按标签分类（#工作 #学习 #生活）。告诉AI加这些功能，让笔记软件从能用变成好用。

💡

笔记软件核心：列表+增删改+localStorage存——再升级搜索和导出！

🔍笔记软件的诞生记

// 笔记App核心逻辑
let notes = JSON.parse(localStorage.getItem("notes") || "[]");

function save() {
  localStorage.setItem("notes", JSON.stringify(notes));
}

function add(title, body) {
  notes.push({
    id: Date.now(),
    title, body,
    time: new Date().toISOString().slice(0, 10)
  });
  save(); render();
}

// 导出笔记为.txt文件
function exportNote(id) {
  const note = notes.find(n => n.id === id);
  const blob = new Blob([note.title + "\n\n" + note.body],
    { type: "text/plain" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = note.title + ".txt";
  a.click();
}

// 搜索过滤
function search(keyword) {
  return notes.filter(n =>
    n.title.includes(keyword) || n.body.includes(keyword));
}

跟着做，做出能用的笔记App：

第1步 提需求
「用HTML+CSS+JS做一个笔记软件：
  - 左边列表，右边编辑区
  - 新建/删除/编辑笔记
  - 每条带标题和时间戳
  - 用localStorage保存
  - 简洁清爽，配色绿色」

第2步 AI生成代码
index.html / style.css / script.js
核心数据结构：
  notes = [
    { id: 1, title: "学习Qoder",
      body: "今天学了对话写代码",
      time: "2026-09-24" },
  ]

第3步测试核心功能

新建「学Qoder」→列表出现 ✅

点开编辑→改内容 ✅

刷新页面→还在 ✅

删除→消失 ✅

第4步迭代升级「加搜索框，输入关键词过滤」「加导出按钮，下载成.txt」「加标签分类 #工作 #学习」

第5步自定义改成你的颜色、加图标、改成记录学习笔记、读书笔记……

数据流闭环：

输入→加到数组→存localStorage

→渲染到页面→用户操作→更新数组

→再存→再渲染

你的笔记软件，从此诞生！

🎯小测验

第1题：为什么刷新页面笔记会消失？

第2题：想把笔记导出成.txt文件下载，应该用？

第3题：笔记软件搜索功能的核心思路是？

📝本课知识点

✓笔记核心：列表+编辑区+增删改
✓增删改三连是所有笔记App的标配
✓localStorage让数据存得住
✓Blob+createObjectURL导出文件
✓搜索用indexOf过滤数组

第8课完成！继续探索下一课吧 🚀

🛠️

上一课

第7课

下一课

第9课

🛠️