支持过期时间的localStorage React Hook

最新推荐文章于 2024-06-04 09:56:44 发布
最新推荐文章于 2024-06-04 09:56:44 发布
阅读量586 收藏
点赞数
文章标签： react.js 前端 前端框架 javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41907806/article/details/114465741
版权
这篇博客介绍了作者如何创建一个支持过期时间的React Hook，利用localStorage进行数据存储。通过tsdx构建项目，作者封装了一个功能，使得localStorage能够处理过期时间。实现思路包括将值与过期时间一同存储，比较过期时间与当前时间，过期则删除，否则返回值。该Hook已发布到npm，并提供了age参数用于设置过期时间，还具备防止缓存覆盖的前缀功能。
摘要由CSDN通过智能技术生成

最近自己造了一个轮子，支持过期时间的localStorage React Hook。

这次使用「tsdx」构建项目，tsdx是一个用于ts开发的零配置命令行工具，构建时自动添加打包工具、测试、storybook、Example等，节省了很多安装包的命令。

localStorage只有getItem, setItem, removeItem(), clear()4个API，本身并不支持过期时间，但我们可以添加这个功能并封装成React Hook函数。

实现思路如下：

  • 将Item的值和过期时间作为一个对象，使用JSON.stringify()处理

  • 调用setItem()，将值和过期时间一起存入

  • 调用getItem()，用JSON.parse()处理取出过期时间，与当前时间判断

  • 如果过期调用removeItem()删除缓存，如果没过期就获取Item的值

最后打包发布到npm。

使用

const [item, setItem] = useLocalStorage(key, { initialValue, prefix, age });

age就是设置的过期时间，使用ms库处理后存入到localStorage，每次访问该缓存时都会判断是否过期。age可以取这些值

最低0.47元/天 解锁文章
不作声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React自定义Hooks——useLocalStorage
读心悦
05-13 1120
封装任何的函数，都是将一些重复的逻辑单独封装到一个函数。而不是为了封装而封装。 定义useLocalStorage，是因为localStorage，在不同的组件中获取，更新。每次更新或者获取都是localStorage.setItem/localStorage.getItem。 单独封装为一个hook，在获取和更新的时候，就像使用state一样简单： useLocalStorage： import { useState, } from 'react'; export default function us
local-storage-hook:React Hook本地存储
03-11
本地存储挂钩 React Hook本地存储 安装 npm add local-storage-hook 签名 const [ localState , setLocalState ] = useLocalStorage ( key , defaultValue ) ; 用法 import React from 'react' import useLocalStorage from 'local-storage-hook' export default ( ) => { // const [localState, setLocalState] = useLocalStorage(key, defaultValue); const [ login , setLogin ] = useLocalStorage ( "login" , false ) ; return ( <
localStorage 设置过期时间
忘川
10-24 1359
1、设置 const localStorageSet = (name, data, expire = 24) => { const time = new Date().getTime() + expire * 60 * 60 * 1000; const obj = { data, time }; localStorage.setItem(name, JSON.stringif...
推荐：react-use-localstorage——React Hooks实现的本地存储神器
最新发布
gitblog_00082的博客
06-04 370
推荐：react-use-localstorage——React Hooks实现的本地存储神器 项目地址:https://gitcode.com/dance2die/react-use-localstorage 在现代React开发中，我们经常需要在客户端进行数据持久化存储，而react-use-localstorage就是这样一个强大的工具。它允许你在React应用中轻松地使用Hooks来操作浏...
实现一个自定义 React Hook：useLocalStorageState
fe_watermelon的博客
05-30 651
大家好，我是前端西瓜哥。最近做需求，需要将数据保存到 localStorage 里，在组件初始化的时候获取，然后修改该值的时候，要保存到本地的 localStorage 中。倒是并不难。function App() {   const STORAGE_NAME = 'app_theme';   const defaultVal = '前端西瓜哥'   const&nb
react-localstorage-hook
03-26
Díasatrásleshabíacompartidocómorealizar un custom hook para react（ ），pero en eldíahoy，les comparto la forma de utilizar el mismo para poderguardar datos en el localstorage，埃斯佩罗雀巢阵风 ...
ReactHookComponents:自定义React Hook的集合
04-18
- 导入你需要的自定义Hook，例如：`import { useLocalStorage } from 'ReactHookComponents-master/hooks/localStorage';` - 在你的组件中使用它，就像使用React内置的Hooks一样：`const [value, setValue] = ...
use-state-persist:简单的React Hook可以在本地持久缓存useState。 轻松加载陈旧状态以获得更好的用户体验
05-02
一个简单的React Hook可以将useState持久存储在本地存储中。 可在Web和React Native 。 轻松实施 离线状态 重新验证流程时过时 全球状态 npm install use-state-persist # or yarn add use-state-persist 如何...
use-persisted-state：一个自定义的React Hook，它提供了一个多实例，多标签浏览器共享和持久状态
02-05
使用持久状态 一个自定义的 ，它提供了多实例，多选项卡/浏览器的共享和持久状态。...要使用use-persisted-state ，必须使用react@16.8.0或更高版本（包括Hooks）。 安装 $ npm i use-persisted-stat
react-React组件可以安全地在渲染阶段将数据保存到localStorage
08-14
React组件可以安全地在渲染阶段将数据保存到localStorage
react-use-localstorage ：（寻求维护者）
02-03
React使用本地存储 取决于稳定的v16.8.1〜 使用访问。 在CodeSandbox上分叉 如何使用它 import React from 'react' ; import ReactDOM from 'react-dom' ; import useLocalStorage from 'react-use-localstorage' ; import './styles.css' ; function App ( ) { const [ item , setItem ] = useLocalStorage ( 'name' , 'Initial Value' ) ; return ( < div xss=removed> < h1> Set Name to store in Local Storage < / h1 > < div> < label> Name: { ' ' } < input type = "text"
react+ts项目localStorage定时清除
m0_59074147的博客
03-28 1093
import React, { Component, createRef } from 'react'; interface Props { } interface State { } interface List { name: string, Age: string, address: string } export default class LocalClear extends Component<Props, State> { constructo.
设置localstorage过期时间
shengjon的博客
08-02 219
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.
如何给localStorage设置一个过期时间？
热门推荐
画漫画的程序员∙苏南
11-01 6万+
带你一点一点分析前端存储，如何给localStorage、getStorageSync(小程序)，设置一个有效期，让使用cookie一样使用它们，让你不再为数据存储的问题而忧心,更多精品文章尽在 Js中文网 - 前端进阶资源教程
前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录
baidu_39009276的博客
12-08 8194
前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录
关于JWT Token 自动续期的解决方案
飘渺Jam的博客
07-16 7677
前言在前后端分离的开发模式下，前端用户登录成功后后端服务会给用户颁发一个jwt token。前端(如vue)在接收到jwt token后会将token存储到LocalStorage中。后...
如何对登录token有效期控制，前端控制和后端控制
LOxia的博客
08-04 5289
如何对登录token有效期控制，前端控制和后端控制
localStorage数据存储设置有效期
weixin_46449188的博客
08-13 5134
H5存储，localStorage数据存储设置有效期 在实际开发中，cookie存储过于影响性能，我们通常会通过localStorage存储去实现7天免登陆等功能，但是localStorage的有效期是永久的，这边封装了一个方法，直接调用实现localStorage数据存储的有效期； // 封装方法，给localStorage设置有效期 class Storage{ constructor() { this.name = 'Storage' } // 设置存储
react函数组件中如何存储一组数据到localStorage中
06-08
在React函数组件中存储一组数据到localStorage中，可以按照以下步骤进行操作： 1. 使用 `useState` hook 定义一个数组来存储数据，例如： ```javascript const [data, setData] = useState([]); ``` 2. 在组件挂载时，从localStorage中获取之前存储的数据，如果有则更新state： ```javascript useEffect(() => { const storedData = localStorage.getItem('data'); if (storedData) { setData(JSON.parse(storedData)); } }, []); ``` 3. 当数据更新时，将数据存储到localStorage中： ```javascript useEffect(() => { localStorage.setItem('data', JSON.stringify(data)); }, [data]); ``` 完整代码示例： ```javascript import React, { useState, useEffect } from 'react'; const MyComponent = () => { const [data, setData] = useState([]); useEffect(() => { const storedData = localStorage.getItem('data'); if (storedData) { setData(JSON.parse(storedData)); } }, []); useEffect(() => { localStorage.setItem('data', JSON.stringify(data)); }, [data]); const handleAdd = (item) => { const newData = [...data, item]; setData(newData); } return ( <div> <button onClick={() => handleAdd('new item')}>Add</button> <ul> {data.map((item, index) => <li key={index}>{item}</li>)} </ul> </div> ); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值