131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
/**
|
||
* 获取应用缓存大小的组合式函数
|
||
*/
|
||
export function useCacheSize() {
|
||
const cacheSize = ref<string>("计算中...");
|
||
const isLoading = ref(false);
|
||
|
||
/**
|
||
* 计算当前应用使用的缓存大小
|
||
*/
|
||
async function calculateCacheSize() {
|
||
isLoading.value = true;
|
||
try {
|
||
if ("storage" in navigator && "estimate" in navigator.storage) {
|
||
// 使用 Storage API 获取精确的存储使用量
|
||
const estimate = await navigator.storage.estimate();
|
||
const usageInMB = ((estimate.usage || 0) / (1024 * 1024)).toFixed(2);
|
||
cacheSize.value = `${usageInMB} MB`;
|
||
}
|
||
else {
|
||
// 降级方案：计算 localStorage 大小
|
||
let totalSize = 0;
|
||
for (const key in localStorage) {
|
||
if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
|
||
totalSize += localStorage[key].length + key.length;
|
||
}
|
||
}
|
||
const sizeInKB = (totalSize / 1024).toFixed(2);
|
||
cacheSize.value = `${sizeInKB} KB`;
|
||
}
|
||
}
|
||
catch (error) {
|
||
console.error("计算缓存大小失败:", error);
|
||
cacheSize.value = "未知";
|
||
}
|
||
finally {
|
||
isLoading.value = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取缓存大小的原始字节数
|
||
*/
|
||
async function getCacheSizeInBytes(): Promise<number> {
|
||
try {
|
||
if ("storage" in navigator && "estimate" in navigator.storage) {
|
||
const estimate = await navigator.storage.estimate();
|
||
return estimate.usage || 0;
|
||
}
|
||
else {
|
||
let totalSize = 0;
|
||
for (const key in localStorage) {
|
||
if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
|
||
totalSize += localStorage[key].length + key.length;
|
||
}
|
||
}
|
||
return totalSize;
|
||
}
|
||
}
|
||
catch (error) {
|
||
console.error("获取缓存大小失败:", error);
|
||
return 0;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清除应用缓存
|
||
*/
|
||
async function clearCache(): Promise<void> {
|
||
isLoading.value = true;
|
||
try {
|
||
// 清除 localStorage
|
||
localStorage.clear();
|
||
|
||
// 清除 sessionStorage
|
||
sessionStorage.clear();
|
||
|
||
// 清除 Service Worker 缓存
|
||
if ("serviceWorker" in navigator) {
|
||
const registrations = await navigator.serviceWorker.getRegistrations();
|
||
for (const registration of registrations) {
|
||
await registration.unregister();
|
||
}
|
||
}
|
||
|
||
// 清除 Cache API 缓存
|
||
if ("caches" in window) {
|
||
const cacheNames = await caches.keys();
|
||
await Promise.all(
|
||
cacheNames.map(cacheName => caches.delete(cacheName)),
|
||
);
|
||
}
|
||
|
||
// 清除 IndexedDB（如果需要）
|
||
if ("indexedDB" in window) {
|
||
const databases = await indexedDB.databases();
|
||
await Promise.all(
|
||
databases.map((db) => {
|
||
if (db.name) {
|
||
return new Promise<void>((resolve, reject) => {
|
||
const request = indexedDB.deleteDatabase(db.name!);
|
||
request.onsuccess = () => resolve();
|
||
request.onerror = () => reject(request.error);
|
||
});
|
||
}
|
||
return Promise.resolve();
|
||
}),
|
||
);
|
||
}
|
||
|
||
// 重新计算缓存大小
|
||
await calculateCacheSize();
|
||
}
|
||
catch (error) {
|
||
console.error("清除缓存失败:", error);
|
||
throw error;
|
||
}
|
||
finally {
|
||
isLoading.value = false;
|
||
}
|
||
}
|
||
|
||
return {
|
||
cacheSize,
|
||
isLoading,
|
||
calculateCacheSize,
|
||
getCacheSizeInBytes,
|
||
clearCache,
|
||
};
|
||
}
|