如何通过前端特征码嗅探提前预判当前环境是否支持大规模本地存储-js教程-PHP中文网

正确答案为if(window.localstorage)，该语句通过检查window对象下localstorage属性是否存在来判断浏览器是否支持本地存储，是web开发中检测api兼容性的标准做法。

直接检测浏览器是否支持大规模本地存储，不能只看有没有 indexeddb api，因为有 api 不代表能用——实际可用容量、写入权限、沙盒限制、私密模式拦截等都可能让“支持”变成“不可用”。前端特征码嗅探的核心思路是：不依赖文档承诺，而是通过轻量、可逆、无副作用的行为试探，快速得出环境真实能力。

用 IndexedDB 打开+写入+删除三步验证真实可用性

很多浏览器（如 Safari 无痕模式、某些 iOS WebView）会声明支持 IndexedDB，但调用 open() 就失败，或写入时抛 QuotaExceededError。应模拟最小闭环操作：

创建一个临时 DB（名称带时间戳，避免冲突），版本设为 1
在 onupgradeneeded 中仅创建一个空 objectStore，不做数据写入
成功打开后，立即调用 deleteDatabase() 清理；若中途 reject 或超时（如 1500ms），视为不可用
捕获常见错误：VersionError（版本冲突）、InvalidStateError（关闭中操作）、AbortError（权限拒绝）均算失败

结合 storage.estimate() 判断配额余量是否足够

Chrome / Edge / Firefox 支持 navigator.storage.estimate()，返回 {usage, quota}。这不是精确值，但能区分“完全受限”和“基本可用”：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

若 Promise 拒绝，说明 storage API 被禁用（如企业策略、隐私插件拦截）
若 quota === 0 或 usage / quota > 0.95，即使 IndexedDB 可打开，也不适合存数百 MB 离线数据
注意：Safari 目前不支持该 API，需降级为 IndexedDB 探测 + 用户提示

检查私密/无痕模式的间接信号

无痕模式下，IndexedDB 常被限制为内存型（关页即丢），且 storage.estimate() 可能返回极小 quota。可叠加以下特征交叉判断：

监听 localStorage.setItem('test','x') 后立即 getItem，若返回 null，大概率处于严格隐私模式
检测 document.hasFocus() === false 且页面可见性为 hidden 时 IndexedDB 打开失败，常出现在 iOS PWA 后台限制场景
使用 matchMedia('(prefers-reduced-data: reduce)') 判断用户是否启用省流模式，这类环境通常主动限制缓存行为

规避“假阳性”：不依赖 UA 或特性检测库

UA 字符串不可靠（可伪造），typeof indexedDB !== 'undefined' 只说明存在，不代表可用。也不要依赖第三方库的静态判断表——它们无法感知当前上下文的实际策略限制。所有探测必须在当前页面生命周期内实时执行，且每次业务需要大规模存储前重新验证一次（比如用户点击“离线下载”按钮时）。