前端使用js獲取儲存大小

前端使用 js 獲取儲存大小

前端使用 js 獲取儲存大小是一個很常見的需求，我們在這里整理一下各種使用場景。通過本文，您可以學到：

1. 怎么使用 js 獲取用戶上傳文件的大小
2. 怎么使用 js 獲取 cookie 或 session 的大小

怎么使用 js 獲取用戶上傳文件的大小

主要原理是，上傳文件的 input 里面可以拿到文件對象，然后就可以直接從這個對象上面的 size 屬性上獲取文件大小，如果需要兼容 ie 的話，需要額外處理：

let target = document.getElementById('file');

if (!target.files) {
    var filePath = target.value;
    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
    var file = fileSystem.GetFile(filePath);
    fileSize = file.Size;
} else {
    fileSize = target.files[0].size;
}

怎么使用 js 獲取 cookie 或 session 的大小

根據JavaScript 數據類型和數據結構可以知道：

1. 數字在 js 中是以 64 位儲存的，所以每個數字類型占 8 字節
2. 字符串的每個字母在 js 中是以 16 位儲存的，所以字符串的每個字母占 2 字節
3. 對於對象等引用類型，由於大部分是引用，所以主要由它內部的變量決定
4. 對於 TypedArray objects，儲存大小通過查表獲得

所以比如說我們要獲取某個 sessionStorage 的大小，因為 sessionStorage 里面儲存的都是字符串，所以我們計算這個字符串所占的儲存空間即可。源碼如下：

function getSessionStorageSize(key) {
    const item = sessionStorage.getItem(key);
    let size = JSON.stringify(item).length * 2;
    const arr = ['bytes', 'KB', 'MB', 'GB', 'TB'];
    let sizeUnit = 0;

    while(size > 1024) {
        size /= 1024;
        ++sizeUnit;
    }

    return `${key}的大小為：${size.toFixed(2)}${arr[sizeUnit]}`;
}