统计 localStorage 已使用空间

Question

在较新的 chrome 上测试，localStorage 的存储是按照字符个数来算的。 包含键和值的。

所以在测试代码中，你把 a 修改 啊 ，不会影响存储的数量。 但是键的长度，会影响存储的数量。

代码

function getLSUsedSpace() {
    return Object.keys(localStorage).reduce((total, curKey) => {
        if (!localStorage.hasOwnProperty(curKey)) {
            return total;
        }
        total += localStorage[curKey].length + curKey.length;
        return total;
    }, 0)
}

示例

localStorage.clear();
localStorage.a = "啊";
console.log(getLSUsedSpace()); // 2

溢出测试：

key 的值为长度为 10 的 kkkkkkkkkk :
输出结果： Max: 5242880 value Length: 5242870
当你把 key 修改长度为 1 的 k :
输出结果：Max: 5242880 value Length: 5242879

localStorage.clear();
let valLength = 0
try {
    let str = Array.from({ length: 5242800 }, () => "啊").join("");
    valLength = str.length;
    for (let i = 0; i < 10000000000000; i++) {
        str += "a"
        valLength += 1;
        localStorage.setItem(`kkkkkkkkkk`, str);
    }

} catch (err) {
    console.error("存储失败", err);
    console.log("Max:", getLSUsedSpace(), " value Length:", valLength)
}

注意

超过存储上线是会报错的：

如何捕获错误,可以参考 MDN testing_for_availability

大致是对 Error 的错误码和 name 进行判断

e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);

参考引用

calculating-usage-of-localstorage-space
what-is-the-max-size-of-localstorage-values
Test of localStorage limits/quota