本地存储localStorage设置过期时间示例详解.docxVIP

第

本地存储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(){