一个完全活在浏览器里的
Serverless 记事本
没有数据库,没有 API,没有账号,无需安装。笔记保存在你自己的浏览器里,分享时把内容直接编码进链接本身。
把 index.html 丢到任何静态托管上就能用。
这是界面预览。真正的编辑器请前往 np.92li.uk
功能特性
小而全,每一项都只用原生 HTML / CSS / JavaScript 完成。
自动保存
标题与正文防抖 500 ms 后写入 localStorage。关闭标签页,下次回来一切如旧。
深色 / 浅色主题
首次访问跟随系统偏好;一键切换并记住你的选择。
在线分享链接
生成普通 URL(?note=<base64>),任何人点开即可在编辑器中查看。
离线快照
生成自包含的 data:text/html URL —— 一份带主题的只读副本,无需任何服务器即可打开。
一键复制
Clipboard API,并为非安全上下文提供 execCommand 回退。
响应式 & 超轻量
手机、平板、桌面都好用。约 20 KB,无构建步骤,无框架。
工作原理
整个流程只有三步:编辑、存储、编码进链接。
contenteditable 编辑
标题与正文都是可编辑区域,输入事件防抖后写入。
localStorage 持久化
页面加载时自动恢复,数据从不离开你的浏览器。
Base64 / Data-URL
标题 + 分隔符 + 正文 → UTF-8 → base64,或内联成只读 HTML 快照。
┌────────────────────┐ input (debounced) ┌──────────────────┐
│ contenteditable │ ────────────────────▶ │ localStorage │
│ title + content │ ◀──────────────────── │ (auto-restore) │
└─────────┬──────────┘ load └──────────────────┘
│ Share
▼
title + "\n[---NOTE-SEPARATOR---]\n" + content
│
├─▶ base64 ──▶ https://your.site/?note=<base64> (online link)
│
└─▶ inline HTML snapshot ──▶ data:text/html;charset=utf-8,… (offline snapshot)
快速开始
在线用、本地跑、或者 Fork 一份部署到自己的 GitHub Pages。
git clone https://github.com/lingyicute/Serverless-Notepad.git
cd Serverless-Notepad
# 直接双击 index.html,或者起一个静态服务:
python3 -m http.server 8080
部署你自己的副本
- 1Fork 这个仓库。
- 2进入 Settings → Pages,将来源设置为 GitHub Actions。
- 3推送到
main,内置的工作流.github/workflows/static.yml会自动发布。
分享链接由 window.location.origin + pathname 生成,无需任何配置即指向你自己的部署。Tailwind 与 Lucide 通过公共 CDN 加载,需联网获取样式与图标。
限制与隐私
诚实说明,用得安心。
- 笔记只存储在你浏览器的
localStorage中,清除站点数据会将其删除。绝不会向服务器发送任何内容。 - 分享链接以 base64 明文包含整条笔记,拿到链接的人都能阅读。请勿以此分享敏感信息。
- 过大的笔记可能超出浏览器 URL 长度限制(尤其是 Data-URL 快照);超过约 1.8 M 字符会被友好地拒绝。
- 同一时间只保留一条笔记;打开分享链接会替换当前笔记。