实现一个自定义的ReactHook：UseLocalStorageState

大家好，我是前端西瓜哥。最近需求需要将数据保存在localStorage中，在组件初始化的时候获取，修改值的时候再保存到本地的localStorage中。这并不难。函数App(){constSTORAGE_NAME='app_theme';constdefaultVal='前端西瓜哥'const[value,setValue]=useState(()=>{conststorage=localStorage.getItem(STORAGE_NAME);returnstorage||defaultVal;})constchangeValue=(val)=>{localStorage.setItem(STORAGE_NAME,val);设置值（值）；}return(

);}显然，这些逻辑可以封装成一个ReactHook，其名字很容易被认为是useLocalStorageState。constuseLocalStorageState=(key,defaultValue)=>{constdata=localStorage.getItem(key);const[value,setValue]=useState(data||defaultValue);return[value,(val)=>{localStorage.setItem(key,val);设置值（值）；}];};逻辑并不复杂。读写的时候加上localStorage的读写逻辑即可。用法如下：functionApp(){constSTORAGE_NAME="app_theme";constdefaultVal="前端西瓜哥";const[value,setValue]=useLocalStorageState(STORAGE_NAME,defaultVal);return();}其实这个实现还是比较粗糙，只支持字符串格式，如果要保存对象，需要手动JSON.parse和JSON.stringify来扩展数据类型的范围。我们可以添加序列化和反序列化支持：constuseLocalStorageState=(key,defaultValue)=>{constdata=localStorage.getItem(key);const[value,setValue]=useState(JSON.parse(data||defaultValue));return[value,(val)=>{localStorage.setItem(key,JSON.stringify(val));设置值（值）；}];};//使用函数App(){constSTORAGE_NAME="app_theme";constdefaultVal={name:"前端西瓜"};const[value,setValue]=useLocalStorageState(STORAGE_NAME,defaultVal);return();}另外，如果JSON序列化和反序列化方法还不够，我们可以添加自定义序列反序列化方法：constuseLocalStorageState=(key,defaultValue,serializer,deserializer)=>{defaultValue=localStorage.getItem(key)||默认值;const[value,setValue]=useState(deserializer?deserializer(defaultValue):JSON.parse(defaultValue));返回[值，（val)=>{localStorage.setItem(key,serializer?serializer(val):JSON.stringify(val));设置值（值）；}];};其实优秀的第三方ReactHook库ahooks也有这个实现，我还是建议大家使用一些比较成熟的轮子。这里我只提供ahooks的useLocalStorageState的源码：https://github.com/alibaba/hooks/blob/v3.4.0/packages/hooks/src/useLocalStorageState/index。TS。