实现一个自定义ReactHook：UseLocalStorageState

大家好，我是前端西瓜哥。

最近做需求，需要将数据保存到 localStorage 里，在组件初始化的时候获取，然后修改该值的时候，要保存到本地的 localStorage 中。

倒是并不难。

function App() {
  const STORAGE_NAME = 'app_theme';
  const defaultVal = '前端西瓜哥'
  const [value, setValue] = useState(() => {
    const storage = localStorage.getItem(STORAGE_NAME);
    return storage || defaultVal;
  }) 
  const changeValue = (val) => {
    localStorage.setItem(STORAGE_NAME, val);
    setValue(val);
  }
  return (
    

       changeValue(e.target.value)}/>
    

  );
}

很显然，这些逻辑完全可以封装为一个 React Hook，名字很容易想到为 useLocalStorageState。

const useLocalStorageState = (key, defaultValue) => {
  const data = localStorage.getItem(key);
  const [value, setValue] = useState(data || defaultValue);
  return [
    value,
    (val) => {
      localStorage.setItem(key, val);
      setValue(val);
    }
  ];
};

逻辑并不复杂。就是在读和写的时候，加上 localStorage 的读写逻辑就好了。

用法如下：

function App() {
  const STORAGE_NAME = "app_theme";
  const defaultVal = "前端西瓜哥";
  const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
  return (
    

       setValue(e.target.value)} />
    

  );
}

其实这个实现还是比较粗糙的，只支持字符串格式，如果你要保存对象，需要自己手动 JSON.parse 和 JSON.stringify 来扩展了数据类型的范围。

我们可以加一下序列化和反序列化支持：

const useLocalStorageState = (key, defaultValue) => {
  const data = localStorage.getItem(key);
  const [value, setValue] = useState(JSON.parse(data || defaultValue));
  return [
    value,
    (val) => {
      localStorage.setItem(key, JSON.stringify(val));
      setValue(val);
    }
  ];
};
// 使用
function App() {
  const STORAGE_NAME = "app_theme";
  const defaultVal = { name: "前端西瓜哥" };
  const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
  return (
    

              value={value.name}
        onChange={(e) => setValue({ name: e.target.value })}
      />
    

  );
}

另外，JSON 序列化和反序列方法如果不够用，我们可以再加个自定义序列反序列化方法：

const useLocalStorageState = (key, defaultValue, serializer, deserializer) => {
  defaultValue = localStorage.getItem(key) || defaultValue;
  const [value, setValue] = useState(
    deserializer ? deserializer(defaultValue) : JSON.parse(defaultValue)
  );
  return [
    value,
    (val) => {
      localStorage.setItem(
        key,
        serializer ? serializer(val) : JSON.stringify(val)
      );
      setValue(val);
    }
  ];
};

其实优秀的第三方 React Hook 库 ahooks 也有这个实现，我还是建议大家用一些比较成熟的轮子，我这里只是提供一下思路。

ahooks 的 useLocalStorageState 的源码：

https://github.com/alibaba/hooks/blob/v3.4.0/packages/hooks/src/useLocalStorageState/index.ts。

网站栏目：实现一个自定义ReactHook：UseLocalStorageState
网站网址：http://www.shufengxianlan.com/qtweb/news18/383368.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联