本帖最后由 yibeijiu 于 2026-7-31 17:21 编辑
轻量级网页笔记工具，方便临时记录想法、代码和待办事项。
项目使用原生 HTML、CSS 和 JavaScript 编写，不依赖框架，也不需要安装数据库。解压后直接打开 index.html 即可使用。
主要功能
- 笔记自动保存
- 笔记本分类和标签
- 标题、正文、标签搜索
- 笔记置顶、归档和回收站
- Markdown 简单预览
- 深色模式
- JSON 数据导入和导出
- 单篇笔记导出为 Markdown
- 支持电脑和手机页面
- 支持 PWA 离线使用
快捷键：
Ctrl + N：新建笔记
Ctrl + K：搜索
Ctrl + S：立即保存
使用方法
需要使用完整的离线缓存和桌面安装功能，可以在项目目录运行：
python -m http.server 8000
然后访问：
http://localhost:8000
关键代码说明
本地保存
笔记通过 localStorage 保存：
localStorage.setItem(
STORAGE_KEY,
JSON.stringify({
notes: state.notes,
notebooks: state.notebooks
})
);
因此不需要服务器，数据默认只保存在当前浏览器中。
自动保存
输入后延迟 350 毫秒保存，避免每输入一个字符都写入数据：
clearTimeout(state.saveTimer);
state.saveTimer = setTimeout(() => {
note.title = titleInput.value;
note.content = contentInput.value;
note.updatedAt = new Date().toISOString();
persist();
}, 350);
搜索
搜索范围包括标题、正文和标签：
notes.filter(note =>
`${note.title} ${note.content} ${note.tags.join(' ')}`
.toLowerCase()
.includes(keyword)
);
离线使用
通过 Service Worker 缓存网页文件，访问一次后可以离线打开：
caches.open(CACHE).then(cache => cache.addAll(ASSETS));
注意事项
数据保存在浏览器中，清理浏览器数据可能导致笔记丢失，建议定期使用“导出备份”。
文件： | 
发表于 2026-7-31 15:58
