专栏名称: 大迁世界
掘金LV8,思否10万+的作者。一个热爱前端的创业者。
今天看啥  ›  专栏  ›  大迁世界

19.useSessionStorage

大迁世界  · 公众号  ·  · 2024-11-17 20:06
    

文章预览

在 Web 应用开发中,有时我们需要 在单个会话内持久化状态 ,这意味着数据在页面刷新后保留,但在关闭浏览器后消失。 useSessionStorage 钩子提供了一种简洁的方式来将 React 状态与浏览器的 sessionStorage 结合,实现会话级的数据持久化。这个自定义钩子不仅简化了 sessionStorage 的使用,还完美融入了 React 的状态管理模型。以下是如何实现和使用这个自定义钩子: const  useSessionStorage =  ( keyName, defaultValue ) =>  {    const  [storedValue, setStoredValue] = React.useState( ()  =>  {      try  {        const  value =  window .sessionStorage.getItem(keyName);        if  (value) {          return   JSON .parse(value);       }  else  {          window .sessionStorage.setItem(keyName,  JSON .stringify(defaultValue));          return  defaultValue;       }     }  catch  (err) {        r ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览