直接用html+javascript调用coingecko api会因cors跨域限制被浏览器拦截，导致白屏或fetch失败；需代理中转或后端服务，且须加localstorage缓存（带时间戳）、空值防护（如number().tofixed()）、降级提示等机制保障稳定性。
直接用 HTML + JavaScript 调用公开 API 就能做出可用的加密货币行情页，但不加防错和缓存机制的话，页面大概率会白屏、卡死或显示陈旧价格。
为什么 fetch 直接调 CoinGecko API 会失败
浏览器会拦截跨域请求，而 CoinGecko 的 /api/v3/coins/markets 接口默认不允许前端直连（CORS 策略限制）。你看到的空白或 TypeError: Failed to fetch 很可能就是这个原因。
- 必须走代理（比如 Vercel Edge Function、Cloudflare Worker）或后端中转，不能在纯静态 HTML 里硬写
fetch("https://api.coingecko.com/...") - 本地
file://协议下所有fetch都会被拒绝，必须起一个本地服务（npx serve或 VS Code Live Server） - 免费 API 有速率限制（10–50 次/分钟），频繁刷新会返回
429 Too Many Requests
如何用 localStorage 缓存价格避免重复请求
每次打开页面都去拉 API，既慢又容易触发限流。把数据存在 localStorage 里，只在过期（比如 60 秒）后才重新请求，体验和稳定性都明显提升。
- 存的时候记时间戳：
localStorage.setItem("cg_cache", JSON.stringify({ data: res, timestamp: Date.now() })) - 读的时候先判断：
if (Date.now() - cached.timestamp > 60 * 1000) { /* fetch again */ } - 注意
localStorage是字符串存储，必须用JSON.parse()和JSON.stringify()处理 - 不要缓存整个响应体（含大量描述字段），只存你需要的字段：例如
id、name、current_price、price_change_percentage_24h
表格渲染时遇到 undefined 或小数位乱跳怎么办
API 返回的价格字段类型不统一（有些是 null，有些是数字，BTC 可能是整数，SHIB 则是科学计数法），直接插进 HTML 容易崩或显示异常。
- 用
Number(data.current_price)?.toFixed(2)强制转数字再格式化，比data.current_price.toFixed(2)安全得多 - 对涨跌幅做空值保护：
(data.price_change_percentage_24h ?? 0).toFixed(2) - 大额币种（如 BTC）建议用
Intl.NumberFormat分组显示：new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(price) - 别在循环里反复拼接 HTML 字符串，用
document.createElement或template.innerHTML更可控
真正难的不是把价格列出来，而是让页面在 API 不可用、网络抖动、用户狂点刷新时依然不崩、不假死、不显示 0 或 NaN —— 这些细节得靠缓存策略、空值防御和降级提示来兜底，而不是堆 CSS 动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
