前言
最近在项目开发中，遇见了大家都常会遇见的问题，让本地存储支持过期时间的设置。那相信学习前端的童鞋们都知道，我们经常是会用的 cookie、localStorage、sessionStorage，它们三个都是可以用来存放数据的。这里我们就不细讲它们之间的区别，主要讲当我们设置localStorage的时候，怎么来给它设置一个过期时间了？下来我们就开始今天的主题。
封装
根据一般的业务需求，我们需要支持新增，修改，删除，按照初步设想，开始编写我们代码。可跳过中间部分，直接查看最后的完整版代码示例。(TS目前还有不太熟练的地方，有什么地方又问题欢迎指出)
// 定义类
class NStorage {
storage: Storage;
constructor(name?: string) {
this.storage = window[name as keyof typeof window] || window.localStorage
}
/**
* @description 存储方法
* @param {String} key 键名
* @param {any} value 值
* @param {number} [expires] 可选，默认0，永久
*/
set(key: string, value: any, expires: number = 0) {
const storeValue = {
value,
startTime: new Date().getTime(),
__expires__: expires
}
this.storage.setItem(key, JSON.stringify(storeValue))
}
/**
* @description 获取方法
* @param {String} key 键名
* @returns {any} 值
*/
get(key: string) {
try {
const storeItem = this.storage.getItem(key) || '{}'
const storeValue = JSON.parse(storeItem)
const time = new Date().getTime()
// 如果是永久，则直接返回
if (storeValue?.__expires__ === 0) return storeValue
// 判断当前时间是否过期
if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {
this.remove(key);
return null;
}
return storeValue.value
} catch (error) {
return null
}
}
/**
* @description 删除方法
* @param {String} key 删除键名
*/
remove(key: string) {
key && this.storage.removeItem(key);
}
/**
* @description 清除所有本地存储
*/
clear() {
this.storage.clear();
}
}下面截图是本地测试：
3秒后localStorage里面的值就会被删除。功能我们是实现啦，是不是就可以皆大欢喜了？有没有bug？有没有可以优化的问题了？那当然是有的了：
- 设置的过期时间，表示的是秒？分？小时？
- 如果多次设置同一个值，那么依据现在逻辑，每次都会重新计算时间，但是我可能只是更新值，时间不需要重新计算了？
优化
定义出选项类型
// 定义支持时间类型，依次：年、月、日、时、分、秒
type TUnitType = 'Y' | 'M' | 'D' | 'h' | 'm' | 's'
// 定义可选参类型
interface IExtraOptions {
expires?: number;
unit?: TUnitType,
reset?: boolean
}
// 设置默认初始值
const EXTRA_OPTIONS: IExtraOptions = {
expires: 0, // 默认永久
unit: 's', // 默认秒
reset: false // 是否重置时间
}
// 根据单位和传入时间，计算出毫秒级时间
function calcTime(time: number, unit: TUnitType = 's') {
let newTime = 0
switch (unit) {
case 'Y':
newTime = time * 365 * 24 * 60 * 60 * 1000
break;
case 'M':
// 注意⚠️：月份这里偷懒，直接使用每月30天计算
newTime = time * 30 * 24 * 60 * 60 * 1000
break;
case 'D':
newTime = time * 24 * 60 * 60 * 1000
break;
case 'h':
newTime = time * 60 * 60 * 1000
break;
case 'm':
newTime = time * 60 * 1000
break;
case 's':
newTime = time * 1000
break;
default:
newTime = time
break;
}
return newTime
}修改 set、get 方法
/**
* @description 存储方法
* @param {String} key 键名
* @param {any} value 值
* @param {number} [options] 可选
* @param {Number} [options.expires] 默认0，永久
* @param {String} [options.unit] 默认's'，秒
* @param {Boolean} [options.reset] 默认false，不重置
*/
set(key: string, value: any, options?: IExtraOptions) {
const isExist = this.hasKey(key)
const extra = Object.assign(EXTRA_OPTIONS, options)
if (isExist) {
// 如果存在，判断是否是需要重新设置值
const sValue = this.get(key, true)
sValue.value = value
sValue.__expires__ = calcTime(extra.expires || sValue.__expires__, extra.unit || sValue.__unit__)
if (extra.reset) {
// 存在且重新设置时间
sValue.startTime = new Date().getTime()
this._set(key, sValue)
} else {
// 如果已经存在，且不重新计算时间，则直接修改值后存储
this._set(key, sValue)
}
} else {
const storeValue = {
value,
startTime: new Date().getTime(),
__expires__: calcTime(extra.expires as number, extra.unit),
__unit__: extra.unit
};
this._set(key, storeValue)
}
}
/**
* @description set内部方法
* @param {String} key 键名
* @param {any} value 值
*/
private _set(key: string, value: any) {
this.storage.setItem(key, JSON.stringify(value));
}
/**
* @description 获取方法
* @param {String} key 键名
* @param {Boolean} [isMerge] 可选，是否获取处理后的对象
* @returns {any} 值
*/
get(key: string, isMerge: boolean = false) {
try {
// 不存在直接返回 null
if (!key) return null
const storeItem = this.storage.getItem(key) || '{}'
const storeValue = JSON.parse(storeItem)
const time = new Date().getTime()
// 如果是永久，则直接返回
if (storeValue?.__expires__ === 0) return isMerge ? storeValue : storeValue.value;
// 判断当前时间是否过期，过期则删除当前存储值
if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {
this.remove(key);
return null;
}
return isMerge ? storeValue : storeValue.value;
} catch (error) {
return null
}
}
/**
* @description 是否存在
* @param {String} key 键
* @returns {Boolean} true｜false
*/
hasKey(key: string) {
if (!key) return false
const value = this.get(key)
return value ? true : false
}优化后使用介绍
const store = new NStorage()
// 普通设置，不过期
store.set('name', '小红')
// 设置过期时间5秒
store.set('name', '小红', { expires: 5 })
// 设置过期时间5分钟，其他更换单位即可
store.set('name', '小红', { expires: 5, unit: 'm' })
// 重新计算有效时长（就相当于在设置的时刻起，再往后延长之前的设置时间）
store.set('name', '小红', { reset: true })
// 获取值
store.get('name')
// 删除值
store.remove('name')
// 删除所有值
store.clear()
// 当前存储值中是否存在
store.hasKey('name')完整版代码
// 定义支持时间类型，依次：年、月、日、时、分、秒
type TUnitType = 'Y' | 'M' | 'D' | 'h' | 'm' | 's'
// 定义可选参类型
interface IExtraOptions {
expires?: number;
unit?: TUnitType,
reset?: boolean
}
// 设置默认初始值
const EXTRA_OPTIONS: IExtraOptions = {
expires: 0, // 默认永久
unit: 's', // 默认秒
reset: false // 是否重置时间
}
// 根据单位和传入时间，计算出毫秒级时间
function calcTime(time: number, unit: TUnitType = 's') {
let newTime = 0
switch (unit) {
case 'Y':
newTime = time * 365 * 24 * 60 * 60 * 1000
break;
case 'M':
// 月份这里偷懒，直接使用每月30天计算
newTime = time * 30 * 24 * 60 * 60 * 1000
break;
case 'D':
newTime = time * 24 * 60 * 60 * 1000
break;
case 'h':
newTime = time * 60 * 60 * 1000
break;
case 'm':
newTime = time * 60 * 1000
break;
case 's':
newTime = time * 1000
break;
default:
newTime = time
break;
}
return newTime
}
class NStorage {
storage: Storage;
constructor(name?: string) {
this.storage = window[name as keyof typeof window] || window.localStorage
}
/**
* @description 存储方法
* @param {String} key 键名
* @param {any} value 值
* @param {number} [options] 可选
* @param {Number} [options.expires] 默认0，永久
* @param {String} [options.unit] 默认's'，秒
* @param {Boolean} [options.reset] 默认false，不重置
*/
set(key: string, value: any, options?: IExtraOptions) {
const isExist = this.hasKey(key)
const extra = Object.assign(EXTRA_OPTIONS, options)
if (isExist) {
// 如果存在，判断是否是需要重新设置值
const sValue = this.get(key, true)
sValue.value = value
sValue.__expires__ = calcTime(extra.expires || sValue.__expires__, extra.unit || sValue.__unit__)
if (extra.reset) {
// 存在且重新设置时间
sValue.startTime = new Date().getTime()
this._set(key, sValue)
} else {
// 如果已经存在，且不重新计算时间，则直接修改值后存储
this._set(key, sValue)
}
} else {
const storeValue = {
value,
startTime: new Date().getTime(),
__expires__: calcTime(extra.expires as number, extra.unit),
__unit__: extra.unit
};
this._set(key, storeValue)
}
}
/**
* @description set内部方法
* @param {String} key 键名
* @param {any} value 值
*/
private _set(key: string, value: any) {
this.storage.setItem(key, JSON.stringify(value));
}
/**
* @description 获取方法
* @param {String} key 键名
* @param {Boolean} [isMerge] 可选，是否获取处理后的对象
* @returns {any} 值
*/
get(key: string, isMerge: boolean = false) {
try {
// 不存在直接返回 null
if (!key) return null
const storeItem = this.storage.getItem(key) || '{}'
const storeValue = JSON.parse(storeItem)
const time = new Date().getTime()
// 如果是永久，则直接返回
if (storeValue?.__expires__ === 0) return isMerge ? storeValue : storeValue.value;
// 判断当前时间是否过期，过期则删除当前存储值
if (storeValue?.startTime && (time - storeValue?.startTime >= storeValue?.__expires__)) {
this.remove(key);
return null;
}
return isMerge ? storeValue : storeValue.value;
} catch (error) {
return null
}
}
/**
* @description 删除方法
* @param {String} key 删除键名
*/
remove(key: string) {
key && this.storage.removeItem(key);
}
/**
* @description 清除所有本地存储
*/
clear() {
this.storage.clear();
}
/**
* @description 是否存在
* @param {String} key 键
* @returns {Boolean} true｜false
*/
hasKey(key: string) {
if (!key) return false
const value = this.get(key)
return value ? true : false
}
}最后
里面的逻辑也可根据需求自己添加修改，代码测试我也可能存在未测到的地方，如果有问题欢迎各位大大指出！