Kiểm tra dung lượng LocalStorage trong trình duyệt với TypeScript

Kiểm tra dung lượng LocalStorage bằng TypeScript

LocalStorage là công cụ mạnh mẽ để lưu trữ dữ liệu phía client-side, nhưng nó có giới hạn dung lượng. Việc kiểm tra dung lượng đã sử dụng giúp bạn đảm bảo rằng ứng dụng của mình hoạt động ổn định và không vượt quá giới hạn.

Dưới đây là một hàm TypeScript mạnh mẽ để kiểm tra dung lượng LocalStorage:

export function getLocalStorageSize(): number {
    let totalSize = 0;

    // Lặp qua tất cả các khóa trong localStorage
    for (const key in localStorage) {
        if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
            const value = localStorage.getItem(key) || ""; // Lấy giá trị an toàn
            const itemSize = (key.length + value.length) * 2; // Mỗi ký tự chiếm 2 byte
            totalSize += itemSize;
        }
    }

    console.log(
        `Dung lượng localStorage hiện tại: ${totalSize} bytes (${(totalSize / 1024).toFixed(2)} KB)`
    );

    return totalSize;
}

Cách hoạt động của hàm getLocalStorageSize:

1. Lặp qua các khóa trong LocalStorage: Sử dụng vòng lặp for...in để duyệt qua từng mục trong LocalStorage.
2. Tính kích thước mỗi mục: Tổng hợp độ dài của khóa và giá trị, nhân với 2 (vì mỗi ký tự chiếm 2 byte theo mã hóa UTF-16).
3. In ra dung lượng tổng: Log dung lượng đã sử dụng theo byte và chuyển đổi sang kilobyte để dễ theo dõi.
4. 
   

Ví dụ sử dụng:

// Kiểm tra dung lượng LocalStorage hiện tại
getLocalStorageSize();

Lợi ích của hàm này:

• Tối ưu hóa hiệu suất ứng dụng: Biết được dung lượng đã sử dụng giúp bạn quản lý dữ liệu hiệu quả hơn.
• Tránh vượt giới hạn trình duyệt: Đa số trình duyệt giới hạn LocalStorage ở mức 5MB, hàm này giúp bạn không vượt ngưỡng.
• Áp dụng TypeScript: Giúp phát triển ứng dụng mạnh mẽ và dễ bảo trì.

Hãy triển khai hàm này vào dự án của bạn để quản lý dữ liệu LocalStorage hiệu quả hơn!