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

相关推荐
没有梦想的咸鱼185-1037-166318 分钟前
基于R语言机器学习方法在生态经济学领域中的实践技术应用
开发语言·机器学习·数据分析·r语言
@小红花32 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵34 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
向上的车轮43 分钟前
基于go语言的云原生TodoList Demo 项目,验证云原生核心特性
开发语言·云原生·golang
The Chosen One98544 分钟前
C++ : AVL树-详解
开发语言·c++
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
PH_modest1 小时前
【Qt跬步积累】—— 初识Qt
开发语言·qt
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范