前端进行数据缓存，设置过期时间的方法

最新推荐文章于 2024-06-03 14:03:14 发布

画了五官的猕猴

最新推荐文章于 2024-06-03 14:03:14 发布

阅读量1.4k

点赞数

分类专栏：数据存储详解文章标签：前端

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/129297719

版权

数据存储详解专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了在前端如何设置数据定时失效，当数据量小适合用cookie，大则使用localStorage并添加时间戳。提供了一个示例函数`LocalStorageSetTime`用于存储数据同时记录时间戳，另一个函数`LocalStorageGetTime`检查数据是否过期，如果过期则删除并返回null。

摘要由CSDN通过智能技术生成

前端设置数据定时失效：

如果存储的内容不超过cookie设置的大小，那么使用cookie进行数据的存储和设置有效期是最方便的。
当数据较大时，可以利用localstorage，存数据时候写入一个时间，获取的时候再与当前时间进行比较

利用localstorage实现:

前端存储时，设置一个方法，存储的同时，加上时间戳

export function LocalStoragesetTime (key, value) {
window.localStorage.setItem(
    key, JSON.stringify({ data: value, time: new Date().getTime() })
)
}

有数据时进行存储

LocalStoragesetTime('name',{age:'18'})

取数据时判断是否过期

LocalStoragegetTime(name,27000000)

export const LocalStoragegetTime =(key, ex)=>{
     // 获取数据
     let data = window.localStorage.getItem(key)
     if (!data) return null
     let dataObj = JSON.parse(data)
     if( +new Date()- data.time > ex){
        // 最新时间-存储的时间>过期时间，已过期
        // 过期删除返回null
        removeLocalStorage(key)
        console.log('信息已过期')
        return null
     }else{
         return dataObj.data
     }

}