实现一个自定义 React Hook：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。

很赞哦!（355）