真正可靠的 localStorage 检测必须执行写入+读取+清除的实操验证，仅用 typeof 或存在性判断不可靠；Safari 无痕模式等场景下对象存在但调用 setItem 会抛错，需用封装函数分别检测 localStorage 和 sessionStorage。
直接检测 window.localStorage 是否可用，不能只看它是否存在——有些浏览器（比如 Safari 无痕模式）会返回一个空对象，但实际调用 setItem 会抛错。真正可靠的检测，必须包含“写入+读取+清除”的实操验证。
为什么 typeof 检测不够用
仅判断 typeof window.localStorage === 'object' 或 !!window.localStorage 是危险的。例如：
- Safari 隐私浏览下，
window.localStorage存在但容量为 0，调用setItem会立即抛出QuotaExceededError； - 某些国产浏览器或旧版 IE 可能声明了对象，但方法缺失或不可调用；
- 部分安全策略（如 strict CSP）可能禁用 Storage API，即使对象存在也无法使用。
推荐的兼容性检测函数
以下函数已在 Chrome、Firefox、Safari、Edge 和主流移动端浏览器中验证有效：
function storageAvailable(type) {
try {
const storage = window[type];
const testKey = '__storage_test__';
storage.setItem(testKey, testKey);
storage.removeItem(testKey);
return true;
} catch (e) {
return false;
}
}
// 使用示例
if (storageAvailable('localStorage')) {
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
} else {
console.warn('localStorage 不可用，降级使用 cookie 或内存缓存');
}
sessionStorage 同样需要独立检测
localStorage 可用 ≠ sessionStorage 可用。两者虽同属 Web Storage，但实现机制不同，尤其在隐私模式、企业环境或特定 WebView 中可能单独失效。应分别检测：
storageAvailable('localStorage')storageAvailable('sessionStorage')
不要复用结果，也不要假设二者行为一致。
生产环境建议加一层封装
避免每次使用前都重复检测，可封装成带缓存的工具：
const storageSupport = {
localStorage: null,
sessionStorage: null,
check(type) {
if (this[type] !== null) return this[type];
this[type] = storageAvailable(type);
return this[type];
}
};
后续调用 storageSupport.check('localStorage') 即可，既保证准确性，又兼顾性能。
