
textarea.my原理揭秘Deflate压缩与Base64Url编码如何把万字长文塞进URL哈希【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textareatextarea.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 步文字 → 字节TextEncoder先把文字转成 UTF-8 字节1 个汉字占 3 字节Deflate 压缩用浏览器原生的CompressionStream(deflate-raw)流式压缩。长文里重复的字词、标点极多压缩率非常高Base64Url 编码压缩后是二进制而 URL 只能放安全字符。toBase64({alphabet: base64url})把它转成 URL 安全文本用-和_替代、/无需转义写入哈希get() 拼上#前缀save() 用history.replaceState悄悄替换地址栏——每次打字都不会往浏览历史里塞一堆新条目。另外输入事件做了 500ms 防抖只有你停下来不打字才压缩并刷新 URL打字过程中地址栏纹丝不动。解码还原一条 URL 还你一篇长文反过来更简单decompress() 用Uint8Array.fromBase64DecompressionStream(deflate-raw)原路走一遍。set() 把结果按不可见的\x00分隔符切开——前半是长文正文后半是自定义样式后文细说——再写回编辑区。页面还监听了 hashchange 事件哈希一变文档即刻重载。为什么万字长文也放得下算笔账阶段1 万字中文长文的体积估算原始 UTF-8 字节约 30 KBDeflate 压缩后常见长文可压到 1/3 ~ 1/2Base64Url 膨胀约 33%后通常仍在几十 KB 内现代浏览器对 URL 长度的容忍度普遍达数百 KB 量级远超早年32KB 上限的旧经验所以把万字长文塞进哈希毫无压力。3 个隐藏技巧自定义页签标题正文首行写# 你的标题updateTitle() 会直接改浏览器标签页标题样式也存进 URL用 DevTools 给article加style属性监听脚本 会自动把它一并压缩进哈希样式随链接走⬇️一键导出CtrlS把当前页面下载为 HTML 文件右下角菜单还能保存为 txt。项目还自带 sw.js Service Worker 与 manifest.json让页面可以安装为 PWA、离线也能打开。快速上手3 步分享一篇长文打开 textarea.my输入或粘贴长文Markdown 标题、加粗、代码块会实时高亮逻辑见 parseMarkdown停笔后 URL 已自动压缩更新点右下角菜单 Share link 复制链接发给朋友对方点开即还原全文——无需注册、无需登录。小结textarea.my 的URL 存储 Deflate 压缩Base64Url 编码URL 哈希。仅靠compress()/decompress()两个小函数就做到了无数据库、无账号、随链即走的文本编辑器。下次想传长文给朋友不妨借鉴这个思路先压缩、再编码直接放进 URL。【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textarea创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考