小小记事本 Pro
1 个 HTML 文件 零后端 AGPL-3.0 Made with ❤️ by lingyicute

一个完全活在浏览器里的 Serverless 记事本

没有数据库,没有 API,没有账号,无需安装。笔记保存在你自己的浏览器里,分享时把内容直接编码进链接本身。 把 index.html 丢到任何静态托管上就能用。

我的第一条笔记
分享
点击标题设置名字,点击这里开始写。 一切都会自动保存到 localStorage,关掉标签页也不会丢。 想分享?点右上角「分享」,选择离线快照或在线链接。

这是界面预览。真正的编辑器请前往 np.92li.uk

功能特性

小而全,每一项都只用原生 HTML / CSS / JavaScript 完成。

自动保存

标题与正文防抖 500 ms 后写入 localStorage。关闭标签页,下次回来一切如旧。

深色 / 浅色主题

首次访问跟随系统偏好;一键切换并记住你的选择。

在线分享链接

生成普通 URL(?note=<base64>),任何人点开即可在编辑器中查看。

离线快照

生成自包含的 data:text/html URL —— 一份带主题的只读副本,无需任何服务器即可打开。

一键复制

Clipboard API,并为非安全上下文提供 execCommand 回退。

响应式 & 超轻量

手机、平板、桌面都好用。约 20 KB,无构建步骤,无框架。

工作原理

整个流程只有三步:编辑、存储、编码进链接。

01

contenteditable 编辑

标题与正文都是可编辑区域,输入事件防抖后写入。

02

localStorage 持久化

页面加载时自动恢复,数据从不离开你的浏览器。

03

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)

两种分享方式

点击「分享」后可以任选其一。

方式一:离线快照 (Data-URL)

完全独立,像一个文件,可随时离线打开,内含「在编辑器中打开」按钮。

  • 无需任何服务器,永久可用
  • 自带主题切换
  • 链接很长,必须粘贴到 浏览器地址栏 才能打开

方式二:在线链接 (Redirect-URL)

标准可点击的网页链接,直接在编辑器中打开笔记。

  • 在聊天软件中可直接点击
  • 打开后自动保存到本地并清理 URL
  • 依赖本站点可访问

快速开始

在线用、本地跑、或者 Fork 一份部署到自己的 GitHub Pages。

本地运行
git clone https://github.com/lingyicute/Serverless-Notepad.git
cd Serverless-Notepad
# 直接双击 index.html,或者起一个静态服务:
python3 -m http.server 8080

部署你自己的副本

  1. 1Fork 这个仓库。
  2. 2进入 Settings → Pages,将来源设置为 GitHub Actions
  3. 3推送到 main,内置的工作流 .github/workflows/static.yml 会自动发布。

分享链接由 window.location.origin + pathname 生成,无需任何配置即指向你自己的部署。Tailwind 与 Lucide 通过公共 CDN 加载,需联网获取样式与图标。

限制与隐私

诚实说明,用得安心。

  • 笔记存储在你浏览器的 localStorage 中,清除站点数据会将其删除。绝不会向服务器发送任何内容。
  • 分享链接以 base64 明文包含整条笔记,拿到链接的人都能阅读。请勿以此分享敏感信息。
  • 过大的笔记可能超出浏览器 URL 长度限制(尤其是 Data-URL 快照);超过约 1.8 M 字符会被友好地拒绝。
  • 同一时间只保留一条笔记;打开分享链接会替换当前笔记。

技术栈

Vanilla HTML / CSS / JS Tailwind CSS (CDN) Lucide Icons GitHub Actions → Pages IIFE 作用域,无全局变量

开始写点什么吧 ✏️

整个项目就是一个文件,参与贡献的门槛刻意很低 —— 编辑 index.html 就行。