textarea.my原理揭秘：Deflate压缩与Base64Url编码如何把万字长文塞进URL哈希

textarea.my原理揭秘：Deflate压缩与Base64Url编码如何把万字长文塞进URL哈希

【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textarea

textarea.my是一款极简文本编辑器，把全部内容都存进 URL 哈希里。它没有服务器、没有数据库，你停笔的瞬间，文字就会被Deflate压缩、再经Base64Url编码写进网址的#片段——复制链接，整篇长文随行。下面拆解这套"URL 存一切"的核心原理。

什么是"活在 URL 里的文本编辑器"

textarea.my 的整个站点就是一个静态 index.html，编辑区是一个可编辑的<article>标签，项目里没有任何后端接口。README.md 一句话概括了它："a minimalist text editor that lives entirely in your browser and stores everything in the URL hash"。

核心思路只有一条：把 URL 哈希当数据库。网址#后面的片段容量很大、浏览器随开随还原，而且它不会随请求发送到服务器——这正是"无需数据库"的关键。

URL 编码四步法：文字如何塞进哈希

所有魔法都在 compress() 这个函数里，共 4 步：

1. 文字 → 字节：TextEncoder先把文字转成 UTF-8 字节（1 个汉字占 3 字节）；
2. Deflate 压缩：用浏览器原生的CompressionStream('deflate-raw')流式压缩。长文里重复的字词、标点极多，压缩率非常高；
3. Base64Url 编码：压缩后是二进制，而 URL 只能放"安全字符"。toBase64({alphabet: 'base64url'})把它转成 URL 安全文本（用-和_替代+、/，无需转义）；
4. 写入哈希：get() 拼上#前缀，save() 用history.replaceState悄悄替换地址栏——每次打字都不会往浏览历史里塞一堆新条目。

另外，输入事件做了 500ms 防抖：只有你停下来不打字，才压缩并刷新 URL，打字过程中地址栏纹丝不动。

解码还原：一条 URL 还你一篇长文

反过来更简单：decompress() 用Uint8Array.fromBase64+DecompressionStream('deflate-raw')原路走一遍。set() 把结果按不可见的\x00分隔符切开——前半是长文正文，后半是自定义样式（后文细说）——再写回编辑区。页面还监听了 hashchange 事件，哈希一变，文档即刻重载。

为什么万字长文也放得下

算笔账：

现代浏览器对 URL 长度的容忍度普遍达数百 KB 量级，远超早年"32KB 上限"的旧经验，所以把万字长文塞进哈希毫无压力。

3 个隐藏技巧

• 📌自定义页签标题：正文首行写# 你的标题，updateTitle() 会直接改浏览器标签页标题；
• 🎨样式也存进 URL：用 DevTools 给<article>加style属性，监听脚本 会自动把它一并压缩进哈希，样式随链接走；
• ⬇️一键导出：Ctrl+S把当前页面下载为 HTML 文件，右下角菜单还能保存为 txt。

项目还自带 sw.js Service Worker 与 manifest.json，让页面可以安装为 PWA、离线也能打开。

快速上手：3 步分享一篇长文

1. 打开 textarea.my，输入或粘贴长文（Markdown 标题、加粗、代码块会实时高亮，逻辑见 parseMarkdown）；
2. 停笔后 URL 已自动压缩更新，点右下角菜单 "Share link" 复制链接；
3. 发给朋友，对方点开即还原全文——无需注册、无需登录。

小结

textarea.my 的"URL 存储" =Deflate 压缩+Base64Url 编码+URL 哈希。仅靠compress()/decompress()两个小函数，就做到了无数据库、无账号、随链即走的文本编辑器。下次想传长文给朋友，不妨借鉴这个思路：先压缩、再编码，直接放进 URL。

【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textarea