在react中如何计算本地存储体积

1.定义useLocalStorageSize钩子函数

javascript 复制代码
// 计算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.默认导出

javascript 复制代码
export default useLocalStorageSize;

3.在需要的组件中引入

javascript 复制代码
import useLocalStorageSize from "./Encapsulation/useLocal";

4.设置单位

javascript 复制代码
//设置单位
  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.使用

javascript 复制代码
  const size = useLocalStorageSize();
  const formattedSize = formatSizeUnits(size);

6.效果

相关推荐
子午14 小时前
Python的uv包管理工具使用
开发语言·python·uv
Aotman_15 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61415 小时前
Web前端面试题(1)
前端·面试·职场和发展
EveryPossible15 小时前
选择数据展示
javascript
lypzcgf15 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
HMBBLOVEPDX15 小时前
C++(静态函数)
开发语言·c++
百思可瑞教育15 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
dpxiaolong15 小时前
RK3588 Android12默认移除导航栏
开发语言·python
患得患失94916 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld16 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试