useLocalStorage

import { useState } from "react";const useLocalStorage = (key: string, initialValue?: any) => {const [state, setState] = useState(() => {try {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue;} catch (error) {return initialValue;}});const setLocalStorageState = (newState: (state: any) => void | string) => {try {const newStateValue =typeof newState === "function" ? newState(state) : newState;setState(newStateValue);window.localStorage.setItem(key, JSON.stringify(newStateValue));} catch (error) {// eslint-disable-next-line no-consoleconsole.error(`Unable to store new value for ${key} in localStorage.`);}};return [state, setLocalStorageState];
};export default useLocalStorage;

use

const defaultSettings = {notifications: 'weekly',
};const [appSettings, setAppSettings] = useLocalStorage('app-settings',defaultSettings);onChange={e =>setAppSettings(settings => ({...settings,notifications: e.target.value,}))
}

https://dev.to/alterclass/5-react-custom-hooks-you-should-start-using-explained-5d18

useLocalStorage相关推荐

vue 同时执行两个函数点击_【第2112期】 import { reactive } from #39;vue#39;
前言今日早读文章由@Anthony Fu授权分享. @Anthony Fu,是 Vue 的 Core Team 的一员,在 Vue主要负责 @vue/composition-api 这个项目的维护. ...
react取消捕获_React 面试指南 (上)
使用 React 进行项目开发也有好几个项目了,趁着最近有空来对 React 的知识做一个简单的复盘. 完整目录概览 React 是单向数据流还是双向数据流?它还有其他特点吗? setState Re ...
终于找到你！如何将前端console.log的日志保存成文件?
本篇文章来自一个需求,前端websocket会收到各种消息,但是调试的时候,我希望把websoekt推送过来的消息都保存到一个文件里,如果出问题的时候,我可以把这些消息的日志文件提交给后端开发区分析错 ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
vue key重复_【第2112期】 import { reactive } from #39;vue#39;
前言今日早读文章由@Anthony Fu授权分享. @Anthony Fu,是 Vue 的 Core Team 的一员,在 Vue主要负责 @vue/composition-api 这个项目的维护. ...
slqite3库查询数据处理方式_绝活！十一个优质React Hook库, 收藏备用
本文字数:6539字预计阅读时间:18分钟建议阅读方式:收藏备用温馨提示:最近全国大幅降温,注意防寒保暖,开心跨年长按识别,后台回复 "电子书" 即可领取<JavaS ...
“vueuse“ 中文索引与用例
vueuse 是一个用于 vue 项目中的常用工具集,一些知名前端项目如 ElementUI-plus 等中都有它的声影,基于该项目可以很容易地进行封装,实现更加具体地功能.该工具集也是目前同类库中星 ...
你应该会喜欢的5个自定义 Hook
作者:Grégory D'Angelo 译者:前端小智来源: dev 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub ht ...
Vue工具库VueUse的具体用法
前言上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库. 好奇了一下,点看看了看.好家伙啊, 我直接好家伙.这不就是曾经我也想自己写一个 vue 版的 hooks 库吗?(因为我 ...

useLocalStorage

useLocalStorage相关推荐

最新文章

热门文章