ahooks useSessionStorageState 的用法

最新推荐文章于 2025-08-26 13:59:27 发布

原创最新推荐文章于 2025-08-26 13:59:27 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

useSessionStorageState（）接受一个参数用于绘画存储的key

实例

const [sessionShopId, setSessionShopId] = useSessionStorageState('LOGIN_SHOPID')

在浏览浏览起会话存储中可以看的key为LOGIN_SHOPID

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李@十一₂⁰

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

19.useSessionStorage

粉丝们务必加入微信粉丝群

11-10

188

钩子是一个非常有用的工具，特别适合需要在单个会话内保持状态的场景。通过使用这个钩子，开发者可以轻松实现会话级的数据持久化，提高应用的用户体验，同时保持代码的简洁性和可维护性。在开发需要临时存储功能的 React 应用时，这个自定义钩子可以显著提高开发效率和用户体验。钩子提供了一种简洁的方式来将 React 状态与浏览器的 sessionStorage 结合，实现会话级的数据持久化。这个自定义钩子不仅简化了 sessionStorage 的使用，还完美融入了 React 的状态管理模型。

详细讲一下ahooks中的好用方法（11-20），非常干货

m0_73574455的博客

01-03

598

【代码】详细讲一下ahooks中的好用方法（11-20），非常干货。

参与评论您还未登录，请先登录后发表或查看评论

sessionStorage存储JSON对象的使用

m0_51643873的博客

01-10

883

sessionStorage也可存储Json对象：存储时，通过将对象转换为文本格式；读取时，通过将文本转换回对象。

Vue中localstorage和sessionstorage的使用

包子的博客

12-10

4325

请在这里选择你想要的LocalStorage和SessionStoragelocalStorage使用方法Vue中实现用例 Vue中使用LocalStorage和SessionStorage LocalStorage和SessionStorage 在使用之前，我们先废话的了解一下LocalStorage和SessionStorage 1.sessionStorage(临时存储)：为没一个数据维持...

VueUse使用之useStorage

qq_40278396的博客

10-25

3063

默认情况下，useStorage将根据提供的默认值的数据类型智能地使用相应的序列化程序。例如，JSON.stringify/JSON.parse将用于对象，Number.toString/parseFloat将用于数字等。默认情况下，如果useStorage显示并忽略默认值，它将使用存储中的值。请注意，当您向默认值添加更多属性时，如果客户端的存储没有这个key，则该key可能是undefined。请注意，当您提供null作为默认值时，useStorage不能从它中假定数据类型。

vueuse - useStorage(响应式本地/会话存储)

weixin_42386379的博客

01-29

7107

vueuse-useStorage(响应式本地/会话存储)

【项目实战篇】React强大且灵活hooks库——ahooks

weixin_47002803的博客

07-20

1192

在源码中它首先使用了一个getBoundingClientRect观察目标元素得到位置，判断它的top,bottom,left,right是否在可视区域内，用IntersectionObserver去监听当目标元素的位置发生变化时，目标元素是否还在可视区域内。ahooks 所有的输出函数，引用地址都是不会变化的( 通过useMemoizedFn（ahooks 封装的）实现的，其实现也是通过 useRef实现 )useRequest 的第一个参数是一个异步函数，在组件初次加载时，会自动触发该函数执行。

详细讲讲 (1-10) ahooks 中最实用的 hooks：

m0_73574455的博客

01-01

1109

2.useToggle - 状态切换 3.useUpdateEffect - 忽略首次执行的 useEffect 4.useDebounce - 防抖值 5.useInterval - 定时器 6 useBoolean - 布尔值管理 7.useMount - 组件挂载时执行 8.useUnmount - 组件卸载时执行 9.useLocalStorageState - localStorage 状态管理 10.useSize - 元素尺寸监

React强大且灵活hooks库——ahooks入门实践之副作用类hook（effect）详解

前端开发-前端技术分享

07-14

1115

ahooks是一个强大的React Hooks库，提供了多种实用的副作用处理Hooks。本文重点介绍了ahooks中的副作用类Hooks，包括useUpdateEffect（更新时执行副作用）、useAsyncEffect（处理异步操作）、useDebounceEffect（防抖处理）、useThrottleEffect（节流处理）等，每种Hooks都配有详细的代码示例和使用场景说明。这些Hooks能有效优化React应用性能，简化开发流程，是React开发者提升开发效率的利器。

React强大且灵活hooks库——ahooks入门实践之常用场景hook

前端开发-前端技术分享

07-13

1052

ahooks是一个React Hooks库，提供丰富的自定义hooks解决特定业务场景问题。核心场景类hooks包括：useRequest处理异步请求（支持轮询、防抖、缓存），useAntdTable简化表格表单联动，useLocalStorageState实现状态持久化，以及生命周期管理、事件监听、性能优化等实用hooks。这些hooks显著提升React开发效率，简化复杂逻辑，优化用户体验。ahooks还提供虚拟列表、网络状态监听、主题管理等特色功能，是React开发者必备的高效工具集。

数据存储hooks：localStorage、sessionStorage管理

热门推荐

lotte

06-19

1万+

基于 Vue 3 Composition API 的高质量 Hooks 库

sessionstorage(会话存储对象)使用、存储、读取、删除（一）

qq_44438941的博客

03-15

1万+

sessionstorage(会话存储对象)使用、存储、读取、删除

本地存储方法之sessionStorage存储的使用

SuBaijiu的博客

11-13

5169

本地存储之sessionStorage存储的使用

HTML5 sessionStorage会话存储

weixin_34238642的博客

07-20

2552

　　sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。目录 1. 介绍　　1.1 说明　　1.2 特点　　1.3 浏览器最小版本支持　　1.4 适合场景 2. 成员　　2.1 属性...

VueUse——一个大大提升开发效率的Vue3的工具库

frontend_frank的博客

06-11

2475

前言VueUse是一个基于Composition API实现的基本 Vue 组合实用函数的集合。VueUse可能是受到了react-use的启发，可以看做是vue版的hook，Vue Compostion API支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用，大大地提高你的开发效率在，避免自己去封装一些常用的功能函数，比如：防抖，节流，定时器等。几天前，一个偶然...

VueUse状态管理工具深度探索：useLocalStorage与useSessionStorage

gitblog_00625的博客

08-23

704

VueUse状态管理工具深度探索：useLocalStorage与useSessionStorage 【免费下载链接】vueuse Collection of essential Vue Composition Utilities for Vue 2 and 3 ...

ahooks

03-18

### 关于 ahooks React Hooks 库 ahooks 是一个高质量且可靠的 React Hooks 库，旨在提供一系列实用的预构建 Hooks 来简化开发过程并提高代码质量[^1]。该库不仅提供了许多常见的功能实现，还通过优化性能和增强可靠性来帮助开发者更高效地完成任务。 #### 安装方法要使用 `ahooks`，可以通过 npm 或 yarn 进行安装： ```bash npm install @ahooksjs/core ``` 或者， ```bash yarn add @ahooksjs/core ``` #### 基本使用示例以下是几个常用的 ahooks 实现案例及其说明： ##### 1. **useRequest** 用于处理异步数据请求操作。它支持自动重试、手动触发以及取消等功能。 ```javascript import { useRequest } from '@ahooksjs/use-request'; function App() { const { data, loading, error, run } = useRequest(async () => { const response = await fetch('https://api.example.com/data'); return response.json(); }); if (loading) return <div>Loading...</div>; if (error) return <div>Error occurred</div>; return ( <div> <pre>{JSON.stringify(data)}</pre> <button onClick={run}>Refresh Data</button> </div> ); } ``` ##### 2. **useDebounce** 此 Hook 提供了一种简单的方式来防抖动输入或其他频繁触发的操作。 ```javascript import { useDebounce } from '@ahooksjs/react-hooks'; const MyComponent = ({ value }) => { const debouncedValue = useDebounce(value, 500); console.log(debouncedValue); // 输出延迟后的值 return null; }; ``` ##### 3. **useLockScroll** 当需要锁定页面滚动时可以使用这个 Hook，通常适用于模态框场景。 ```javascript import { useLockScroll } from '@ahooksjs/react-hooks'; const ModalExample = () => { useLockScroll(true); // 锁定滚动 return <div>Modal Content</div>; }; ``` #### 额外注意事项根据官方文档和其他资料中的指导原则，在实际应用过程中需要注意以下几点： - 只有在函数组件内部才能调用 Hooks[^2]。 - 不应在嵌套逻辑或条件语句中直接调用任何 Hook 函数[^3]。对于某些特定需求如懒加载图片等，则可考虑结合原生浏览器 API 和第三方工具一起工作[^4]。