纯HTML无法生成可复用短链接，因其无存储、无服务端逻辑、无状态保持；所谓“HTML短链”实为前端界面配合localStorage或外部API的简易方案，仅限单机离线使用。
纯 HTML 无法生成可复用的短链接，它没有存储能力、没有服务端逻辑、也没有状态保持机制。所谓“HTML 做短链接”，实际是指用 HTML 搭建一个前端界面，配合浏览器本地存储（localStorage）或调用外部 API 实现简易短链功能——仅限单机、无持久化、不跨设备。
为什么不能只靠 HTML 标签生成短链接
HTML 是静态标记语言，<a href></a> 只能写死跳转目标，无法动态生成新短码、无法查库映射、更无法响应用户输入后生成新 URL。你看到的“HTML 短链接页”，比如 /short/go.html，本质是预设好跳转逻辑的固定页面，不是生成器。
常见误解现象：
- 把
<meta http-equiv="refresh" content="0;url=https://example.com">当成“生成短链”——这只是硬编码跳转，每次都要手动改 HTML 文件 - 以为用
location.hash或URLSearchParams就能替代后端——它们只能读地址栏参数，不能存、不能查、不能防重复 - 尝试用
document.write()拼接短链——页面一刷新就丢失，且现代浏览器已限制该用法
用 HTML + JavaScript + localStorage 搭个本地可用的生成器
这是新手最可行的起步方案：所有逻辑跑在浏览器里，不依赖服务器，适合演示或离线测试。
立即学习“前端免费学习笔记（深入）”；
关键实操点：
- 短码生成用
Math.random().toString(36).substr(2, 6)，但必须检查localStorage是否已存在该键，否则会覆盖旧链接 - 长 URL 要用
encodeURIComponent()编码后再存，否则含?、&的链接会解析失败 - 短链接访问页（如
short.html?id=abc123）需用URLSearchParams提取id，再从localStorage查值，最后用window.location.href = longUrl跳转 - 点击统计只能靠
localStorage.setItem('count_abc123', (count || 0) + 1)，刷新页面后才生效，无法实时显示
调用第三方 API 的 HTML 页面怎么写
如果想真正生成可用、可分享的短链，必须走 API。HTML 页面只负责发起请求，核心逻辑在远程服务端。
典型结构：
- 表单提交目标设为
https://api.tinyurl.com/api-create.php（TinyURL 免费接口）或https://api-ssl.bitly.com/v4/shorten（需 Token） - 用
fetch()发 POST 请求，body 中传{ "long_url": "https://..." } - 响应返回 JSON，从中取
link字段（Bitly）或直接返回纯文本短链（TinyURL） - 注意：Bitly v4 要求 header 带
Authorization: Bearer <your_token></your_token>，不能直接用 form 表单提交，必须用 JS
示例片段：
fetch('https://api-ssl.bitly.com/v4/shorten', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_TOKEN_HERE'
},
body: JSON.stringify({ long_url: document.getElementById('urlInput').value })
})
.then(r => r.json())
.then(data => console.log(data.link));
别踩这些坑：localStorage 方案的硬伤
很多人做完 demo 就以为能上线，结果发现根本不可用：
-
localStorage数据只存在当前域名+协议+端口下，http://localhost:3000和https://yoursite.com互不相通 - 用户换浏览器、清缓存、用隐私模式，所有短链立即失效
- 无法做短码去重校验（除非每次遍历全部 key），高并发下大概率冲突
- 没有 HTTPS 时，
localStorage在部分新版 Chrome 中会被禁用 - 短链地址形如
https://yoursite.com/short.html?id=xyz，不如https://yoursite.com/xyz简洁——后者需要服务端路由支持，纯 HTML 做不到
真要上线，至少得配一个轻量后端（比如 Flask + SQLite），哪怕只是跑在 VPS 上。HTML 永远只是门面，不是引擎。
