可通过try...catch尝试读写localstorage来可靠检测webstorage支持性，因仅检查typeof或in操作符易误判；ios无痕模式等场景下sessionstorage可能仍可用；ssr环境需先确保浏览器上下文。
可以直接通过检测 window.localStorage 或 window.sessionStorage 是否存在且为对象类型来判断浏览器是否支持 WebStorage。
基础检测方式（推荐）
最常用、最可靠的检测逻辑是检查 localStorage 属性是否存在，且可调用 setItem 方法：
- 仅检查
typeof window.localStorage === 'object'不够严谨，某些旧版 Safari 在隐私模式下会返回一个空对象但实际调用会抛错 - 应结合
try...catch尝试写入再清除，确保真正可用 - 示例代码：
function isWebStorageAvailable() {
try {
const key = '__storage_test__';
localStorage.setItem(key, key);
localStorage.removeItem(key);
return true;
} catch (e) {
return false;
}
}
区分 localStorage 和 sessionStorage
两者支持情况基本一致，但个别环境（如 iOS Safari 无痕模式）可能只禁用 localStorage 而保留 sessionStorage：
- 若需单独检测，可将上面函数中的
localStorage替换为sessionStorage - 生产环境中建议统一检测
localStorage，因其更常被用于持久化场景，兼容性问题也更典型
避免常见误判
以下情况容易导致错误结论，需特别注意：
- 不要仅用
'localStorage' in window判断——IE6/7 中该表达式为true，但实际不可用 - 不要依赖
window.Storage构造函数存在性——它在部分支持 WebStorage 的浏览器中也可能未定义 - 服务端渲染（SSR）环境（如 Next.js）中
window未定义，需先确保运行在浏览器上下文
实际使用建议
在应用初始化阶段执行一次检测，并缓存结果，避免重复尝试：
- 可封装成模块导出布尔值或 Promise（适配异步初始化场景）
- 检测失败时，应提供降级方案，例如内存缓存（
Map）或 URL 参数传递数据 - 对用户敏感操作（如表单草稿保存），检测失败后给出明确提示，而非静默忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
