盒子
盒子
文章目录
  1. 使用

一个支持过期时间的localStorage React Hook

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

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

实现思路如下:

  • 将Item的值和过期时间作为一个对象,使用JSON.stringify()处理
  • 调用setItem(),将值和过期时间一起存入
  • 调用getItem(),用JSON.parse()处理取出过期时间,与当前时间判断
  • 如果过期调用removeItem()删除缓存,如果没过期就获取Item的值

最后打包发布到npm。

使用

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

age就是设置的过期时间,使用ms库处理后存入到localStorage,每次访问该缓存时都会判断是否过期。
另外,为了防止覆盖之前的缓存,默认会为Item的key前边添加一个前缀Prefix:,也可以自己添加别的前缀。

npm信息

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集