支持过期时间的localStorage React Hook

最近自己造了一个轮子，支持过期时间的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可以取这些值：

{age: '2 days'}  // 172800000
{age: '1d'}      // 86400000
{age: '10h'}     // 36000000
{age: '2.5 hrs'} // 9000000
{age: '2h'}      // 7200000
{age: '1m'}      // 60000
{age: '5s'}      // 5000
{age: '1y'}      // 31557600000
{age: '100'}     // 100

另外，为了防止覆盖之前的缓存，默认会为Item的key前边添加一个前缀Prefix:，也可以自己添加别的前缀。

npm信息