浏览器扩展存储（Extension Storage）介绍

什么是扩展存储？

扩展存储（Extension Storage）是 Chrome 115 版本引入的一种新的存储机制。它提供了比传统 Web Storage（如 localStorage）更大的存储空间，并且具有更好的持久性和安全性。

主要特点

• 更大的存储容量

• 相比 localStorage 的 5-10MB 限制，扩展存储提供更大的存储空间

• 存储空间基于源（origin）的配额系统

• 持久性存储

• 数据不会被浏览器自动清理

• 需要明确的用户授权

• 异步操作

• 所有操作都是基于 Promise 的异步操作

• 避免阻塞主线程

• 更好的安全性

• 提供更安全的存储机制

• 数据隔离性更好

使用示例

1. 检查浏览器支持

`async function requestStorageAccess() {

try {
    const isPersisted = await navigator.storage.persist();
    if (isPersisted) {
        console.log('已获得持久存储权限');
    } else {
        console.log('未获得持久存储权限');
    }
} catch (error) {
    console.error('请求存储权限失败：', error);
}}

2. 请求存储权限

`async function checkStorageQuota() {

try {
    const {usage, quota} = await navigator.storage.estimate();
    console.log(`已使用: ${usage} 字节`);
    console.log(`总配额: ${quota} 字节`);
    console.log(`使用率: ${(usage / quota * 100).toFixed(2)}%`);
} catch (error) {
    console.error('获取存储信息失败：', error);
}
}

3. 查询存储空间

`async function checkStorageQuota() {

try {
    const {usage, quota} = await navigator.storage.estimate();
    console.log(`已使用: ${usage} 字节`);
    console.log(`总配额: ${quota} 字节`);
    console.log(`使用率: ${(usage / quota * 100).toFixed(2)}%`);
} catch (error) {
    console.error('获取存储信息失败：', error);
}}

使用场景

• 大型 Web 应用

• 需要存储大量用户数据

• 复杂的应用状态管理

2. 离线应用

• 需要在离线状态下运行的应用

• PWA（渐进式 Web 应用）

• 数据缓存

• 媒体文件缓存

• 应用资源缓存

最佳实践

1、始终检查兼容性

`async function checkStorageSupport() {

if (!('storage' in navigator)) {
    return false;
}
try {
    await navigator.storage.persist();
    return true;
} catch {
    return false;
}}

2、错误处理

async function safeStorageOperation() {

try {
    // 存储操作
    await navigator.storage.persist();
} catch (error) {
    // 错误处理
    console.error('存储操作失败：', error);
    // 降级到其他存储方式
    fallbackToLocalStorage();
}}

3、监控存储使用情况

`async function monitorStorage() {

const {usage, quota} = await navigator.storage.estimate();
if (usage > quota * 0.9) {
    console.warn('存储空间即将用完！');
}}

注意事项

• 浏览器兼容性

• 目前主要在新版 Chrome 中支持

• 使用前需要检查兼容性

• 用户授权

• 需要用户明确授权才能使用持久存储

• 应该优雅处理授权被拒绝的情况

• 存储限制

• 虽然空间较大，但仍有限制

• 建议定期清理不必要的数据

总结

扩展存储为 Web 应用提供了更强大的存储能力，特别适合需要大量数据存储的现代 Web 应用。虽然目前浏览器支持还不够普及，但随着时间推移，它将成为 Web 存储的重要选择。在使用时，需要注意兼容性检查和错误处理，同时提供适当的降级方案。