本地存储localStorage设置过期时间示例详解.docx
第
本地存储localStorage设置过期时间示例详解
在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案。
在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可。
目录结构
enumts定义枚举
//字典Dictionariesexpire过期时间keypermanent永久不过期
exportenumDictionaries{
expire=__expire__,
permanent=permanent
typets定义类型
import{Dictionaries}from../enum
exporttypeKey=string//key类型
exporttypeexpire=Dictionaries.permanent|number//有效期类型
exportinterfaceDataT{//格式化data类型
value:T
[Dictionaries.expire]:Dictionaries.expire|number
exportinterfaceResultT{//返回值类型
message:string,
value:T|null
exportinterfaceStorageCls{//class方法约束
set:T(key:Key,value:T,expire:expire)=void
get:T(key:Key)=ResultT|null
remove:(key:Key)=void
clear:()=void
index.ts主要逻辑实现
import{StorageCls,Key,expire,Data,Result}from./type
import{Dictionaries}from./enum
exportclassStorageimplementsStorageCls{
//存储接受keyvalue和过期时间默认永久
publicsetT=any(key:Key,value:T,expire:expire=Dictionaries.permanent){
//格式化数据
constdata={
value,
[Dictionaries.expire]:expire
//存进去
localStorage.setItem(key,JSON.stringify(data))
publicgetT=any(key:Key):ResultT|null{
constvalue=localStorage.getItem(key)
//读出来的数据是否有效
if(value){
constobj:DataT=JSON.parse(value)
constnow=newDate().getTime()
//有效并且是数组类型并且过期了进行删除和提示
if(typeofobj[Dictionaries.expire]==numberobj[Dictionaries.expire]now){
this.remove(key)
return{
message:`您的${key}已过期`,
value:null
}else{
//否则成功返回
return{
message:成功读取,
value:obj.value
}else{
//否则key值无效
console.warn(key值无效)
return{
message:`key值无效`,
value:null
//删除某一项
publicremove(key:Key){
localStorage.removeItem(key)
//清空所有值
publicclear(){