常用的浏览器API

一句话：前端日常最常碰到的浏览器 API——编解码、格式化、几何测量、Cookie 与存储——按场景速查即可。

写在前面

浏览器 API 庞杂，本文聚焦业务里高频、易混的部分，不追求完整列举。示例均在现代 Chromium / Edge 下验证；Safari 与旧版 IE 需单独查兼容性。

读完你能：正确选用 URI 编解码函数；用 toLocaleString 做千分位；用 getBoundingClientRect 做布局计算；区分 Cookie 与 Web Storage。

核心内容

1. URI 编解码（替代 escape）

escape / unescape 已废弃，且只正确处理 ASCII；一律用上面四个，支持 Unicode。

const q = encodeURIComponent('你好&world')
// 拼进 URL：/search?kw=${q}

2. 数字格式化 toLocaleString

MDN · toLocaleString

const num = (1000000).toLocaleString('zh-CN', { style: 'decimal' })
console.log(num) // "1,000,000"

const price = (1234.5).toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'CNY'
})
// "¥1,234.50"

金额展示优先用 Intl.NumberFormat，语义更清晰。

3. Element.getBoundingClientRect

返回元素相对视口的 top/left/width/height，常用于吸顶、懒加载、拖拽边界。

MDN · getBoundingClientRect

const rect = el.getBoundingClientRect()
const inView = rect.top >= 0 && rect.bottom <= window.innerHeight

注意：值会随滚动变化；需要文档坐标时加上 window.scrollY。

4. Cookie

可设置过期时间，适合服务端可读、跨子域可控的小段状态（如 theme、session id）。

// 7 天后过期
document.cookie = `token=abc; max-age=${7 * 24 * 3600}; path=/; SameSite=Lax`

敏感 Token 更推荐 HttpOnly Cookie（仅服务端 Set-Cookie），避免 XSS 读取。

5. Web Storage

localStorage.setItem('draft', JSON.stringify(data))
const draft = JSON.parse(localStorage.getItem('draft') || 'null')
sessionStorage.setItem('tabId', '1') // 关闭标签即清

存对象记得 JSON.stringify；容量超限会抛 QuotaExceededError。

6. 剪贴板 Clipboard API

await navigator.clipboard.writeText('复制内容')
const text = await navigator.clipboard.readText()

需 HTTPS 或 localhost；权限被拒时降级 document.execCommand('copy')（已废弃但仍作兜底）。

7. 常用 Observer

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) loadImage(e.target)
  })
})
io.observe(imgEl)

8. 其他实用 API

• URL / URLSearchParams：解析与构造 query，替代手写字符串拼接。
• fetch：网络请求；注意自行处理非 2xx 与超时。
• requestAnimationFrame：动画与滚动性能优化。
• matchMedia('(prefers-color-scheme: dark)')：跟随系统深色模式。

踩坑

1. encodeURI 与 encodeURIComponent 混用会导致 #、& 被错误编码或漏编码。
2. getBoundingClientRect 触发 reflow，高频 scroll 监听里应节流。
3. localStorage 存 Token 有 XSS 风险；HttpOnly Cookie 更安全。
4. toLocaleString 在不同浏览器小数位规则可能略有差异，金额用 minimumFractionDigits 显式指定。
5. Clipboard API 在 非安全上下文（纯 HTTP）不可用。

小结

• 编解码：弃用 escape，URI 用 encodeURI*，组件用 encodeURIComponent。
• 展示：toLocaleString / Intl 做本地化数字与货币。
• 布局：getBoundingClientRect 测视口相对位置。
• 存储：Cookie 小且可随请求；localStorage 大但不自动过期；按安全需求选型。

延伸阅读

• MDN · Web API 参考
• 前端缓存工具 localforage.js 的使用