在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.效果

相关推荐
OEC小胖胖34 分钟前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim2 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
不想写bug呀2 小时前
多线程案例——单例模式
java·开发语言·单例模式
某公司摸鱼前端3 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
我不会写代码njdjnssj3 小时前
网络编程 TCP UDP
java·开发语言·jvm
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子4 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边4 小时前
Cursor 进阶使用教程
前端·ai编程·cursor