18.useLocalStorage

文章预览

在 Web 应用开发中， 持久化状态 是一个常见需求，特别是在需要在页面刷新或会话之间保持数据的场景。 useLocalStorage 钩子提供了一种简洁的方式来将 React 状态与浏览器的 localStorage 结合，实现数据的持久化存储。这个自定义钩子不仅简化了 localStorage 的使用，还seamlessly集成到了 React 的状态管理模型中。以下是如何实现和使用这个自定义钩子： const  useLocalStorage =  ( keyName, defaultValue ) =>  {    const  [storedValue, setStoredValue] = React.useState( ()  =>  {      try  {        const  value =  window .localStorage.getItem(keyName);        if  (value) {          return   JSON .parse(value);       }  else  {          window .localStorage.setItem(keyName,  JSON .stringify(defaultValue));          return  defaultValue;       }     }  catch  (err) {        return  defaultValue;    ………………………………