浏览器存储配额管理：智能清理与容量优化策略

浏览器存储配额管理：智能清理与容量优化策略概述浏览器存储配额管理是现代Web应用面临的重要挑战。随着应用数据量的增长，如何有效管理存储空间、实现智能清理和容量优化变得至关重要。本文将深入探讨浏览器存储配额管理机制，实现智能清理算法与容量优化策略。存储配额检测与监控1. 配额检测管理器interface StorageQuota { quota: number; usage: number; usageDetails?: Record<string, number>; } interface StorageEstimate extends StorageQuota { available: number; usagePercentage: number; warningLevel: 'low' | 'medium' | 'high' | 'critical'; } class StorageQuotaManager { private estimates: Map<string, StorageEstimate>; private listeners: Set<(estimate: StorageEstimate) => void>; private monitoringInterval: number; private updateInterval: NodeJS.Timeout | null; constructor(monitoringInterval: number = 30000) { // 30秒 this.estimates = new Map(); this.listeners = new Set(); this.monitoringInterval = monitoringInterval; this.updateInterval = null; } async initialize(): Promise<void> { await this.updateAllEstimates(); this.startMonitoring(); } async getEstimate(origin?: string): Promise<StorageEstimate> { const targetOrigin = origin || window.location.origin; if (!this.estimates.has(targetOrigin)) { await this.updateEstimate(targetOrigin); } return this.estimates.get(targetOrigin)!; } private async updateEstimate(origin: string): Promise<void> { try { if ('storage' in navigator && 'estimate' in navigator.storage) { const estimate = await navigator.storage.estimate(); const enhancedEstimate = this.enhanceEstimate(estimate, origin); this.estimates.set(origin, enhancedEstimate); this.notifyListeners(enhancedEstimate); } else { // 降级方案：使用传统API估算 const fallbackEstimate = await this.getFallbackEstimate(origin); this.estimates.set(origin, fallbackEstimate); this.notifyListeners(fallbackEstimate); } } catch (error) { console.error('Failed to update storage estimate:', error); throw new Error(`Storage estimate unavailable for ${origin}`); } } private enhanceEstimate(estimate: StorageQuota, origin: string): StorageEstimate { const available = estimate.quota - estimate.usage; const usagePercentage = (estimate.usage / estimate.quota) * 100; let warningLevel: 'low' | 'medium' | 'high' | 'critical'; if (usagePercentage >= 90) { warningLevel = 'critical'; } else if (usagePercentage >= 75) { warningLevel = 'high'; } else if (usagePercentage >= 50) { warningLevel = 'medium'; } else { warningLevel = 'low'; } return { ...estimate, available, usagePercentage, warningLevel }; } private async getFallbackEstimate(origin: string): Promise<StorageEstimate> { // 模拟估算逻辑 const quota = this.estimateQuota(); const usage = await this.calculateUsage(); return this.enhanceEstimate({ quota, usage }, origin); } private estimateQuota(): number { // 基于设备和浏览器的配额估算 const deviceInfo = this.getDeviceInfo(); const baseQuota = 50 * 1024 * 1024; // 50MB base switch (deviceInfo.deviceType) { case 'mobile': return baseQuota * 0.5; // 25MB for mobile case 'tablet': return baseQuota * 0.8; // 40MB for tablet case 'desktop': return baseQuota * 2; // 100MB for desktop default: return baseQuota; } } private async calculateUsage(): Promise<number> { let totalUsage = 0; // 计算localStorage使用量 try { for (const key in localStorage) { if (localStorage.hasOwnProperty(key)) { totalUsage += (localStorage[key].length + key.length) * 2; // UTF-16 } } } catch (error) { console.warn('localStorage usage calculation failed:', error); } // 计算IndexedDB使用量 try { const dbUsage = await this.calculateIndexedDBUsage(); totalUsage += dbUsage; } catch (error) { console.warn('IndexedDB usage calculation failed:', error); } // 计算Cache Storage使用量 try { const cacheUsage = await this.calculateCacheStorageUsage(); totalUsage += cacheUsage; } catch (error) { console.warn('Cache Storage usage calculation failed:', error); } return totalUsage; } private async calculateIndexedDBUsage(): Promise<number> { return new Promise((resolve) => { let totalSize = 0; const request = indexedDB.databases(); request.then(async (databases) => { for (const dbInfo of databases) { try { const db = await this.openDatabase(dbInfo.name); const size = await this.calculateDatabaseSize(db); totalSize += size; db.close(); } catch (error) { console.warn(`Failed to calculate size for database ${dbInfo.name}:`, error); } } resolve(totalSize); }).catch(() => resolve(0)); }); } private async calculateCacheStorageUsage(): Promise<number> { try { const cacheNames = await caches.keys(); let totalSize = 0; for (const cacheName of cacheNames) { const cache = await caches.open(cacheName); const requests = await cache.keys(); for (const request of requests) { const response = await cache.match(request); if (response) { const blob = await response.blob(); totalSize += blob.size; } } } return totalSize; } catch (error) { console.warn('Cache Storage calculation failed:', error); return 0; } } private async openDatabase(name: string): Promise<IDBDatabase> { return new Promise((resolve, reject) => { const request = indexedDB.open(name); request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } private async calculateDatabaseSize(db: IDBDatabase): Promise<number> { return new Promise((resolve) => { let totalSize = 0; const transaction = db.transaction(db.objectStoreNames, 'readonly'); let completedStores = 0; const totalStores = db.objectStoreNames.length; if (totalStores === 0) { resolve(0); return; } for (const storeName of db.objectStoreNames) { const objectStore = transaction.objectStore(storeName); const countRequest = objectStore.count(); countRequest.onsuccess = () => { // 粗略估算：每个记录平均1KB totalSize += countRequest.result * 1024; completedStores++; if (completedStores === totalStores) { resolve(totalSize); } }; countRequest.onerror = () => { completedStores++; if (completedStores === totalStores) { resolve(totalSize); } }; } }); } private getDeviceInfo(): DeviceInfo { const userAgent = navigator.userAgent; const width = window.innerWidth; let deviceType: 'mobile' | 'tablet' | 'desktop'; if (width <= 768) { deviceType = 'mobile'; } else if (width <= 1024) { deviceType = 'tablet'; } else { deviceType = 'desktop'; } return { deviceType, userAgent, screenWidth: width, memory: (navigator as any).deviceMemory, cores: navigator.hardwareConcurrency }; } private startMonitoring(): void { this.updateInterval = setInterval(async () => { for (const origin of this.estimates.keys()) { await this.updateEstimate(origin); } }, this.monitoringInterval); } stopMonitoring(): void { if (this.updateInterval) { clearInterval(this.updateInterval); this.updateInterval = null; } } subscribe(listener: (estimate: StorageEstimate) => void): () => void { this.listeners.add(listener); return () => this.listeners.delete(listener); } private notifyListeners(estimate: StorageEstimate): void { this.listeners.forEach(listener => { try { listener(estimate); } catch (error) { console.error('Error in storage quota listener:', error); } }); } } 2. 智能清理策略引擎interface CleanupStrategy { name: string; priority: number; canClean(item: StorageItem): boolean; clean(items: StorageItem[]): Promise<CleanupResult>; } interface StorageItem { key: string; size: number; lastAccessed: number; priority: number; type: 'localStorage' | 'indexedDB' | 'cache' | 'sessionStorage'; metadata?: Record<string, any>; } interface CleanupResult { cleanedItems: number; freedSpace: number; errors: string[]; duration: number; } class IntelligentCleanupEngine { private strategies: CleanupStrategy[]; private storageAnalyzer: StorageAnalyzer; private cleanupHistory: CleanupHistory[]; constructor() { this.strategies = []; this.storageAnalyzer = new StorageAnalyzer(); this.cleanupHistory = []; this.initializeDefaultStrategies(); } private initializeDefaultStrategies(): void { // LRU清理策略 this.addStrategy(new LRUCleanupStrategy()); // 优先级清理策略 this.addStrategy(new PriorityCleanupStrategy()); // 过期数据清理策略 this.addStrategy(new ExpirationCleanupStrategy()); // 大文件清理策略 this.addStrategy(new LargeFileCleanupStrategy()); // 临时数据清理策略 this.addStrategy(new TemporaryDataCleanupStrategy()); } addStrategy(strategy: CleanupStrategy): void { this.strategies.push(strategy); this.strategies.sort((a, b) => b.priority - a.priority); } async performCleanup( targetSize: number, options: CleanupOptions = {} ): Promise<CleanupResult> { const startTime = performance.now(); const items = await this.storageAnalyzer.analyzeStorage(); const currentSize = items.reduce((sum, item) => sum + item.size, 0); if (currentSize <= targetSize) { return { cleanedItems: 0, freedSpace: 0, errors: [], duration: performance.now() - startTime }; } const requiredCleanup = currentSize - targetSize; let totalCleaned = 0; let totalFreed = 0; const errors: string[] = []; // 按策略优先级执行清理 for (const strategy of this.strategies) { if (totalFreed >= requiredCleanup) break; const cleanableItems = items.filter(item => strategy.canClean(item) && !this.isItemProtected(item, options.protectedItems) ); try { const result = await strategy.clean(cleanableItems); totalCleaned += result.cleanedItems; totalFreed += result.freedSpace; errors.push(...result.errors); } catch (error) { errors.push(`Strategy ${strategy.name} failed: ${error}`); } } const duration = performance.now() - startTime; const cleanupResult: CleanupResult = { cleanedItems: totalCleaned, freedSpace: totalFreed, errors, duration }; this.recordCleanupHistory(cleanupResult); return cleanupResult; } private isItemProtected(item: StorageItem, protectedItems?: string[]): boolean { if (!protectedItems) return false; return protectedItems.includes(item.key); } private recordCleanupHistory(result: CleanupResult): void { this.cleanupHistory.push({ ...result, timestamp: Date.now() }); // 保留最近100条记录 if (this.cleanupHistory.length > 100) { this.cleanupHistory = this.cleanupHistory.slice(-100); } } getCleanupHistory(): CleanupHistory[] { return [...this.cleanupHistory]; } predictCleanupEffect(itemsToClean: StorageItem[]): PredictedEffect { const totalSize = itemsToClean.reduce((sum, item) => sum + item.size, 0); const estimatedTime = this.estimateCleanupTime(itemsToClean.length); const riskLevel = this.assessCleanupRisk(itemsToClean); return { freedSpace: totalSize, estimatedTime, riskLevel, recommendations: this.generateRecommendations(itemsToClean) }; } private estimateCleanupTime(itemCount: number): number { // 基于历史数据估算清理时间 const avgTimePerItem = 10; // 平均每个项目10ms return itemCount * avgTimePerItem; } private assessCleanupRisk(items: StorageItem[]): 'low' | 'medium' | 'high' { const hasHighPriorityItems = items.some(item => item.priority >= 8); const hasRecentItems = items.some(item => Date.now() - item.lastAccessed < 24 * 60 * 60 * 1000 ); const hasLargeItems = items.some(item => item.size > 10 * 1024 * 1024); // 10MB if (hasHighPriorityItems || (hasRecentItems && hasLargeItems)) { return 'high'; } else if (hasRecentItems || hasLargeItems) { return 'medium'; } else { return 'low'; } } private generateRecommendations(items: StorageItem[]): string[] { const recommendations: string[] = []; if (items.some(item => item.priority >= 8)) { recommendations.push('包含高优先级项目，建议谨慎清理'); } if (items.some(item => Date.now() - item.lastAccessed < 60 * 60 * 1000)) { recommendations.push('包含最近访问的项目，可能影响用户体验'); } if (items.some(item => item.size > 50 * 1024 * 1024)) { recommendations.push('包含大文件，清理可能释放大量空间'); } return recommendations; } } // LRU清理策略 class LRUCleanupStrategy implements CleanupStrategy { name = 'LRU (Least Recently Used)'; priority = 100; canClean(item: StorageItem): boolean { // 可以清理任何类型的项目 return true; } async clean(items: StorageItem[]): Promise<CleanupResult> { const startTime = performance.now(); const cleanedItems: StorageItem[] = []; const errors: string[] = []; // 按最后访问时间排序（最久未使用的优先清理） const sortedItems = [...items].sort((a, b) => a.lastAccessed - b.lastAccessed); for (const item of sortedItems) { try { await this.cleanItem(item); cleanedItems.push(item); } catch (error) { errors.push(`Failed to clean ${item.key}: ${error}`); } } const totalFreed = cleanedItems.reduce((sum, item) => sum + item.size, 0); const duration = performance.now() - startTime; return { cleanedItems: cleanedItems.length, freedSpace: totalFreed, errors, duration }; } private async cleanItem(item: StorageItem): Promise<void> { switch (item.type) { case 'localStorage': localStorage.removeItem(item.key); break; case 'sessionStorage': sessionStorage.removeItem(item.key); break; case 'indexedDB': await this.cleanIndexedDB(item); break; case 'cache': await this.cleanCache(item); break; default: throw new Error(`Unknown storage type: ${item.type}`); } } private async cleanIndexedDB(item: StorageItem): Promise<void> { return new Promise((resolve, reject) => { const dbName = item.metadata?.dbName; const storeName = item.metadata?.storeName; if (!dbName || !storeName) { reject(new Error('Missing database or store name')); return; } const request = indexedDB.open(dbName); request.onsuccess = (event) => { const db = (event.target as IDBOpenDBRequest).result; if (item.metadata?.key !== undefined) { // 删除特定记录 const transaction = db.transaction([storeName], 'readwrite'); const store = transaction.objectStore(storeName); const deleteRequest = store.delete(item.metadata.key); deleteRequest.onsuccess = () => resolve(); deleteRequest.onerror = () => reject(deleteRequest.error); } else { // 清空整个存储 const transaction = db.transaction([storeName], 'readwrite'); const store = transaction.objectStore(storeName); const clearRequest = store.clear(); clearRequest.onsuccess = () => resolve(); clearRequest.onerror = () => reject(clearRequest.error); } }; request.onerror = () => reject(request.error); }); } private async cleanCache(item: StorageItem): Promise<void> { const cacheName = item.metadata?.cacheName; if (!cacheName) { throw new Error('Missing cache name'); } const cache = await caches.open(cacheName); if (item.metadata?.url) { // 删除特定缓存 await cache.delete(item.metadata.url); } else { // 清空整个缓存 const requests = await cache.keys(); await Promise.all(requests.map(request => cache.delete(request))); } } } // 优先级清理策略 class PriorityCleanupStrategy implements CleanupStrategy { name = 'Priority-based'; priority = 90; canClean(item: StorageItem): boolean { // 只清理优先级低于5的项目 return item.priority < 5; } async clean(items: StorageItem[]): Promise<CleanupResult> { const startTime = performance.now(); const cleanableItems = items.filter(item => this.canClean(item)); // 按优先级排序（优先级低的优先清理） const sortedItems = cleanableItems.sort((a, b) => a.priority - b.priority); const cleanedItems: StorageItem[] = []; const errors: string[] = []; for (const item of sortedItems) { try { await this.cleanItem(item); cleanedItems.push(item); } catch (error) { errors.push(`Failed to clean ${item.key}: ${error}`); } } const totalFreed = cleanedItems.reduce((sum, item) => sum + item.size, 0); const duration = performance.now() - startTime; return { cleanedItems: cleanedItems.length, freedSpace: totalFreed, errors, duration }; } private async cleanItem(item: StorageItem): Promise<void> { // 实现与LRU策略类似的清理逻辑 const lruStrategy = new LRUCleanupStrategy(); await lruStrategy.clean([item]); } } 3. 智能容量优化器interface OptimizationStrategy { name: string; optimize(items: StorageItem[]): Promise<OptimizationResult>; } interface OptimizationResult { optimizedItems: number; spaceSaved: number; compressionRatio: number; duration: number; } class SmartCapacityOptimizer { private strategies: OptimizationStrategy[]; private compressionManager: CompressionManager; private deduplicationEngine: DeduplicationEngine; constructor() { this.strategies = []; this.compressionManager = new CompressionManager(); this.deduplicationEngine = new DeduplicationEngine(); this.initializeStrategies(); } private initializeStrategies(): void { this.strategies.push(new CompressionOptimizationStrategy(this.compressionManager)); this.strategies.push(new DeduplicationOptimizationStrategy(this.deduplicationEngine)); this.strategies.push(new FormatOptimizationStrategy()); this.strategies.push(new MetadataOptimizationStrategy()); } async optimizeStorage(items: StorageItem[]): Promise<OptimizationResult> { const startTime = performance.now(); let totalOptimized = 0; let totalSaved = 0; let totalCompressionRatio = 0; for (const strategy of this.strategies) { try { const result = await strategy.optimize(items); totalOptimized += result.optimizedItems; totalSaved += result.spaceSaved; totalCompressionRatio += result.compressionRatio; } catch (error) { console.error(`Optimization strategy ${strategy.name} failed:`, error); } } const duration = performance.now() - startTime; const avgCompressionRatio = totalCompressionRatio / this.strategies.length; return { optimizedItems: totalOptimized, spaceSaved: totalSaved, compressionRatio: avgCompressionRatio, duration }; } async autoOptimize(targetRatio: number = 0.8): Promise<AutoOptimizationResult> { const items = await this.storageAnalyzer.analyzeStorage(); const currentUsage = items.reduce((sum, item) => sum + item.size, 0); const optimizationResult = await this.optimizeStorage(items); const newUsage = currentUsage - optimizationResult.spaceSaved; const achievedRatio = newUsage / currentUsage; return { ...optimizationResult, targetRatio, achievedRatio, success: achievedRatio <= targetRatio, recommendations: this.generateOptimizationRecommendations(optimizationResult) }; } private generateOptimizationRecommendations(result: OptimizationResult): string[] { const recommendations: string[] = []; if (result.compressionRatio > 0.5) { recommendations.push('压缩效果显著，建议继续使用压缩策略'); } if (result.spaceSaved > 10 * 1024 * 1024) { // 10MB recommendations.push('优化节省了大量空间，考虑定期进行优化'); } if (result.duration > 5000) { // 5秒 recommendations.push('优化耗时较长，建议在后台或低峰期执行'); } return recommendations; } } // 压缩优化策略 class CompressionOptimizationStrategy implements OptimizationStrategy { name = 'Compression'; constructor(private compressionManager: CompressionManager) {} async optimize(items: StorageItem[]): Promise<OptimizationResult> { const compressibleItems = items.filter(item => this.isCompressible(item) && item.size > 1024 // 只压缩大于1KB的项目 ); let totalSaved = 0; let totalCompressed = 0; for (const item of compressibleItems) { try { const originalData = await this.getItemData(item); const compressedData = await this.compressionManager.compress(originalData); const saved = originalData.byteLength - compressedData.byteLength; if (saved > 0) { await this.saveCompressedItem(item, compressedData); totalSaved += saved; totalCompressed++; } } catch (error) { console.warn(`Failed to compress ${item.key}:`, error); } } const compressionRatio = totalCompressed > 0 ? totalSaved / compressibleItems.reduce((sum, item) => sum + item.size, 0) : 0; return { optimizedItems: totalCompressed, spaceSaved: totalSaved, compressionRatio, duration: 0 // 将在上层计算 }; } private isCompressible(item: StorageItem): boolean { // 文本、JSON、XML等格式可以压缩 const compressibleTypes = ['text/plain', 'application/json', 'text/xml', 'text/css', 'text/javascript']; return compressibleTypes.includes(item.metadata?.contentType); } private async getItemData(item: StorageItem): Promise<ArrayBuffer> { // 根据项目类型获取数据 switch (item.type) { case 'localStorage': case 'sessionStorage': return new TextEncoder().encode(localStorage.getItem(item.key) || '').buffer; case 'indexedDB': return await this.getIndexedDBData(item); case 'cache': return await this.getCacheData(item); default: throw new Error(`Unsupported item type: ${item.type}`); } } private async saveCompressedItem(item: StorageItem, compressedData: ArrayBuffer): Promise<void> { // 保存压缩后的数据，并标记为已压缩 // 具体实现取决于存储类型 } } 4. 配额预警系统interface QuotaAlert { id: string; type: 'warning' | 'critical' | 'emergency'; threshold: number; message: string; actions: AlertAction[]; timestamp: number; } interface AlertAction { id: string; label: string; action: () => Promise<void>; type: 'immediate' | 'scheduled'; } class QuotaAlertSystem { private alerts: Map<string, QuotaAlert>; private activeAlerts: Set<string>; private listeners: Set<(alert: QuotaAlert) => void>; private quotaManager: StorageQuotaManager; private cleanupEngine: IntelligentCleanupEngine; constructor( quotaManager: StorageQuotaManager, cleanupEngine: IntelligentCleanupEngine ) { this.alerts = new Map(); this.activeAlerts = new Set(); this.listeners = new Set(); this.quotaManager = quotaManager; this.cleanupEngine = cleanupEngine; this.initializeDefaultAlerts(); } private initializeDefaultAlerts(): void { // 警告级别 - 使用率75% this.addAlert({ id: 'quota-warning', type: 'warning', threshold: 75, message: '存储空间使用率已达到75%，建议进行清理', actions: [ { id: 'analyze-usage', label: '分析使用情况', action: async () => { const estimate = await this.quotaManager.getEstimate(); console.log('Current usage analysis:', estimate); }, type: 'immediate' }, { id: 'schedule-cleanup', label: '计划清理', action: async () => { // 安排后台清理任务 setTimeout(async () => { await this.performAutomaticCleanup(60); // 清理到60%使用率 }, 5000); }, type: 'scheduled' } ], timestamp: Date.now() }); // 严重级别 - 使用率90% this.addAlert({ id: 'quota-critical', type: 'critical', threshold: 90, message: '存储空间使用率已达到90%，需要立即清理', actions: [ { id: 'immediate-cleanup', label: '立即清理', action: async () => { await this.performAutomaticCleanup(70); // 清理到70%使用率 }, type: 'immediate' }, { id: 'optimize-storage', label: '优化存储', action: async () => { const optimizer = new SmartCapacityOptimizer(); await optimizer.autoOptimize(0.8); }, type: 'immediate' } ], timestamp: Date.now() }); // 紧急级别 - 使用率95% this.addAlert({ id: 'quota-emergency', type: 'emergency', threshold: 95, message: '存储空间使用率已达到95%，必须立即采取行动', actions: [ { id: 'emergency-cleanup', label: '紧急清理', action: async () => { await this.performEmergencyCleanup(); }, type: 'immediate' }, { id: 'clear-temp-data', label: '清除临时数据', action: async () => { await this.clearTemporaryData(); }, type: 'immediate' } ], timestamp: Date.now() }); } addAlert(alert: QuotaAlert): void { this.alerts.set(alert.id, alert); } async checkAndTriggerAlerts(estimate: StorageEstimate): Promise<void> { const usagePercentage = estimate.usagePercentage; for (const [alertId, alert] of this.alerts) { if (usagePercentage >= alert.threshold && !this.activeAlerts.has(alertId)) { await this.triggerAlert(alert, estimate); } else if (usagePercentage < alert.threshold && this.activeAlerts.has(alertId)) { this.dismissAlert(alertId); } } } private async triggerAlert(alert: QuotaAlert, estimate: StorageEstimate): Promise<void> { this.activeAlerts.add(alert.id); // 显示通知 await this.showNotification(alert, estimate); // 记录日志 this.logAlert(alert, estimate); // 通知监听器 this.notifyListeners(alert); // 执行自动操作 await this.executeAutoActions(alert); } private dismissAlert(alertId: string): void { this.activeAlerts.delete(alertId); console.log(`Alert ${alertId} dismissed`); } private async showNotification(alert: QuotaAlert, estimate: StorageEstimate): Promise<void> { if ('Notification' in window && Notification.permission === 'granted') { new Notification(`存储空间${alert.type}`, { body: `${alert.message} (当前使用率: ${estimate.usagePercentage.toFixed(1)}%)`, icon: '/icons/storage-alert.png', tag: alert.id, requireInteraction: alert.type === 'emergency' }); } } private logAlert(alert: QuotaAlert, estimate: StorageEstimate): void { console.warn(`[${alert.type.toUpperCase()}] ${alert.message}`, { alertId: alert.id, usagePercentage: estimate.usagePercentage, usage: estimate.usage, quota: estimate.quota, timestamp: new Date().toISOString() }); } private notifyListeners(alert: QuotaAlert): void { this.listeners.forEach(listener => { try { listener(alert); } catch (error) { console.error('Error in alert listener:', error); } }); } private async executeAutoActions(alert: QuotaAlert): Promise<void> { const autoActions = alert.actions.filter(action => action.type === 'immediate'); for (const action of autoActions) { try { console.log(`Executing auto action: ${action.label}`); await action.action(); } catch (error) { console.error(`Auto action failed: ${action.id}`, error); } } } private async performAutomaticCleanup(targetUsagePercentage: number): Promise<void> { const estimate = await this.quotaManager.getEstimate(); const targetSize = (estimate.quota * targetUsagePercentage) / 100; console.log(`Performing automatic cleanup to reach ${targetUsagePercentage}% usage`); const result = await this.cleanupEngine.performCleanup(targetSize); console.log('Automatic cleanup completed:', { cleanedItems: result.cleanedItems, freedSpace: this.formatBytes(result.freedSpace), duration: `${result.duration.toFixed(2)}ms` }); } private async performEmergencyCleanup(): Promise<void> { console.log('Performing emergency cleanup...'); // 获取当前使用情况 const estimate = await this.quotaManager.getEstimate(); const emergencyTarget = estimate.quota * 0.6; // 目标60%使用率 // 执行激进清理 const result = await this.cleanupEngine.performCleanup(emergencyTarget, { aggressive: true, includeTemporary: true, includeCache: true }); // 如果清理效果不佳，执行更激进的措施 if (result.freedSpace < estimate.usage * 0.2) { await this.performAggressiveCleanup(); } console.log('Emergency cleanup completed:', result); } private async performAggressiveCleanup(): Promise<void> { console.log('Performing aggressive cleanup...'); // 清理IndexedDB中的非关键数据 await this.clearNonCriticalIndexedDB(); // 清理缓存存储 await this.clearAllCache(); // 清理localStorage中的非必要数据 await this.clearNonEssentialLocalStorage(); } private async clearTemporaryData(): Promise<void> { const tempPatterns = [ /^temp_/, /^cache_/, /^session_/, /_tmp$/, /_temp$/ ]; // 清理localStorage中的临时数据 for (const key in localStorage) { if (tempPatterns.some(pattern => pattern.test(key))) { localStorage.removeItem(key); } } // 清理sessionStorage sessionStorage.clear(); console.log('Temporary data cleared'); } private async clearNonCriticalIndexedDB(): Promise<void> { try { const databases = await indexedDB.databases(); const nonCriticalDBs = databases.filter(db => !db.name?.includes('critical') && !db.name?.includes('essential') ); for (const db of nonCriticalDBs) { if (db.name) { indexedDB.deleteDatabase(db.name); } } console.log(`Cleared ${nonCriticalDBs.length} non-critical databases`); } catch (error) { console.error('Failed to clear non-critical IndexedDB:', error); } } private async clearAllCache(): Promise<void> { try { const cacheNames = await caches.keys(); await Promise.all(cacheNames.map(name => caches.delete(name))); console.log(`Cleared ${cacheNames.length} cache storages`); } catch (error) { console.error('Failed to clear cache storages:', error); } } private async clearNonEssentialLocalStorage(): Promise<void> { const essentialKeys = [ 'user_token', 'user_preferences', 'app_config', 'authentication' ]; const keysToRemove: string[] = []; for (const key in localStorage) { if (!essentialKeys.includes(key)) { keysToRemove.push(key); } } keysToRemove.forEach(key => localStorage.removeItem(key)); console.log(`Cleared ${keysToRemove.length} non-essential localStorage items`); } subscribe(listener: (alert: QuotaAlert) => void): () => void { this.listeners.add(listener); return () => this.listeners.delete(listener); } private formatBytes(bytes: number): string { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; } } // 使用示例 class StorageQuotaDemo { private quotaManager: StorageQuotaManager; private cleanupEngine: IntelligentCleanupEngine; private optimizer: SmartCapacityOptimizer; private alertSystem: QuotaAlertSystem; constructor() { this.quotaManager = new StorageQuotaManager(); this.cleanupEngine = new IntelligentCleanupEngine(); this.optimizer = new SmartCapacityOptimizer(); this.alertSystem = new QuotaAlertSystem(this.quotaManager, this.cleanupEngine); } async initialize(): Promise<void> { await this.quotaManager.initialize(); // 设置配额监控 this.quotaManager.subscribe(async (estimate) => { await this.alertSystem.checkAndTriggerAlerts(estimate); }); console.log('Storage quota management system initialized'); } async demonstrateCleanup(): Promise<void> { const estimate = await this.quotaManager.getEstimate(); console.log('Current storage usage:', estimate); // 执行智能清理 const targetSize = estimate.usage * 0.7; // 目标减少到70% const cleanupResult = await this.cleanupEngine.performCleanup(targetSize); console.log('Cleanup result:', cleanupResult); } async demonstrateOptimization(): Promise<void> { const result = await this.optimizer.autoOptimize(0.8); console.log('Optimization result:', result); } } 总结浏览器存储配额管理是现代Web应用必须面对的重要挑战。通过实现智能清理算法、容量优化策略和配额预警系统，我们可以：智能监控：实时监控存储使用情况，提供准确的配额估算主动清理：基于多种策略的智能清理，确保存储空间的有效利用容量优化：通过压缩、去重等技术手段最大化存储效率预警机制：多级别的配额预警，防止存储空间耗尽自动化管理：自动执行清理和优化任务，减少人工干预这套完整的存储配额管理体系能够显著提升Web应用的可靠性和用户体验。