React 中 localStorage 管理_react localstorage-优快云博客

本文链接：https://blog.youkuaiyun.com/just_a_code_man/article/details/122092411

本文探讨了在React应用中如何利用localStorage进行本地储存管理，以解决首次操作判断和避免频繁请求的问题。通过window.localStorage提供的属性和方法，结合React创建自定义Hook，实现了在函数组件中便捷地操作localStorage，如同管理state一样。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中偶尔会有判定首次进行某些操作的需求，由于前端并不直接处理数据库数据无法直接查询。若每次进入页面都发请求查询，既消耗前端性能，也浪费服务器资源。所以，在需求并不非常强，且设计服务端数据更新的情况下，前端一般使用本地储存的方式处理。

JS在 window 对象下提供了一个localStorage 来方便我们管理本地储存。

localStorage 是一个 Storage 对象挂载了 key,clear,setItem,getItem,removeItem,length六个属性和方法供我们使用。通过这六个属性方法可以实现对localstorage的增删改查。

基于以上方法和 react ，创建一个 hook ，来在函数组件中像管理 react state 一样管理 localStorage。

import React from 'react';

export const useStorage = (key: string, val: any) => {
  // 获取 localStorage 对应键值
  let local = window.localStorage.getItem(key) as string | null;
  // 对取出的数据进行 JSON.parse 处理
  local = local === null ? null : localFormat(local);
  // 传入值 是否是 Object 如果是，进行 JSON.stringify 处理
  const value = valueFormat(val);
  // 创建 react 状态 若不存在对应 localStorage 则初始化 ，若存在则将其存储在 react 状态中
  const [state, setState] = React.useState<any | undefined>(local !== null ? local : value);
  // 对应 localStorage 不存在 初始化 localStorage
  if (local === null) {
    window.localStorage.setItem(key, value);
  }
  // 在页面更新状态后，同步更新 localStorage
  React.useEffect(() => {
    // 若 更新 react 状态时 传入空值，删除该 localStorage 对应键
    if (state === undefined) {
      window.localStorage.removeItem(key);
      return;
    }
    // 不为空时 更新 localStorage
    window.localStorage.setItem(key, valueFormat(state));
  }, [state]);
  // 对外暴露 react 状态 和 react reducer
  return [state, setState];
};
// 对于初始化和更新的值进行处理
function valueFormat(value: any): any {
  if (value instanceof Function) {
    throw new Error('function is not allowed');
  }
  if (typeof value === 'symbol') {
    throw new Error('symbol is not allowed');
  }
  if (typeof value === 'object') {
    return JSON.stringify(value);
  }
  return value;
}
// 对 localStorage 中取出的数据进行处理
function localFormat(value: string): any {
  let reValue: any;
  try {
    reValue = JSON.parse(value);
  } catch {
    reValue = value;
  }
  return reValue;
}