1.定义useLocalStorageSize钩子函数

// 计算localStorage大小
function useLocalStorageSize() {const [size, setSize] = useState(0);useEffect(() => {const calculateSize = () => {let totalSize = 0;for (let key in localStorage) {//过滤掉继承自原型链的属性if (localStorage.hasOwnProperty(key)) {// 计算key和value的大小let keySize = new Blob([key]).size;let valueSize = new Blob([localStorage[key]]).size;totalSize += keySize + valueSize;}}setSize(totalSize);};// 初始计算一次大小calculateSize();//当 localStorage发生变化时，重新计算大小window.addEventListener("storage", calculateSize);// 当组件卸载时，移除事件监听return () => {window.removeEventListener("storage", calculateSize);};}, []);return size;
}

2.默认导出 

export default useLocalStorageSize;

3.在需要的组件中引入

import useLocalStorageSize from "./Encapsulation/useLocal";

4.设置单位

//设置单位function formatSizeUnits(bytes: any) {if (bytes >= 1073741824) {return (bytes / 1073741824).toFixed(2) + " GB";} else if (bytes >= 1048576) {return (bytes / 1048576).toFixed(2) + " MB";} else if (bytes >= 1024) {return (bytes / 1024).toFixed(2) + " KB";} else if (bytes > 1) {return (bytes / 1024).toFixed(2) + " KB";} else if (bytes === 1) {return bytes + " byte";} else {return "0 bytes";}}

5.使用

  const size = useLocalStorageSize();const formattedSize = formatSizeUnits(size);

6.效果