typescript封装LocalStorage并支持过期时间

简介: 在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可。

f2646e1869b975a21d969a54b6337026.png


思考


在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案。


实现思路


在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可。


代码实现


目录结构


a4acb0855e66de945b12e3fedeb0c003.png


enum ts 定义枚举


//字典 Dictionaries    expire过期时间key    permanent永久不过期
export enum Dictionaries {
    expire = '__expire__',
    permanent = 'permanent'
}
复制代码


type ts 定义类型


import { Dictionaries } from "../enum"
export type Key = string //key类型
export type expire = Dictionaries.permanent | number //有效期类型
export interface Data<T> {  //格式化data类型
    value: T
    [Dictionaries.expire]: Dictionaries.expire | number
}
export interface Result<T> { //返回值类型
    message: string,
    value: T | null
}
export interface StorageCls { //class方法约束
    set: <T>(key: Key, value: T, expire: expire) => void
    get: <T>(key: Key) => Result<T | null>
    remove: (key: Key) => void
    clear: () => void
}
复制代码


index.ts 主要逻辑实现


import { StorageCls, Key, expire, Data,Result } from "./type";
import { Dictionaries } from "./enum";
export class Storage implements StorageCls {
    //存储接受 key value 和过期时间 默认永久
    public set<T = any>(key: Key, value: T, expire: expire = Dictionaries.permanent) {
    //格式化数据
        const data = {
            value,
            [Dictionaries.expire]: expire
        }
        //存进去
        localStorage.setItem(key, JSON.stringify(data))
    }
    public get<T = any>(key: Key):Result<T | null> {
        const value = localStorage.getItem(key)
        //读出来的数据是否有效
        if (value) {
            const obj: Data<T> = JSON.parse(value)
            const now = new Date().getTime()
            //有效并且是数组类型 并且过期了 进行删除和提示
            if (typeof obj[Dictionaries.expire] == 'number' && obj[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
             }
        }
    }
    //删除某一项
    public remove(key:Key) {
        localStorage.removeItem(key)
    }
    //清空所有值
    public clear() {
       localStorage.clear()
    }
}
复制代码


rollup.js 简易打包暂时没有写的很复杂 所用到的依赖 rollup rollup-plugin-typescript2 typescript


旧版写法


import ts from 'rollup-plugin-typescript2'
import path from 'path'
export default {
     input:'./src/index.ts',
     output:{
         file:path.resolve(__dirname,'./dist/index.js')
     },
     plugins:[
        ts()
     ]
}
复制代码


新版写法


import ts from 'rollup-plugin-typescript2'
import path from 'path'
import {fileURLToPath} from 'url'
const metaUrl = fileURLToPath(import.meta.url)
const dirName = path.dirname(metaUrl)
export default {
     input:'./src/index.ts',
     output:{
         file:path.resolve(dirName,'./dist/index.js')
     },
     plugins:[
        ts()
     ]
}


代码测试


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import { Storage } from './dist/index.js'
        const sl = new Storage()
        //五秒后过期
        sl.set('a', 123, new Date().getTime() + 5000)
        setInterval(() => {
            const a = sl.get('a')
            console.log(a)
        },500)
    </script>
</body>
</html>
复制代码


测试五秒后过期增加计时器观察值


过期之后 成功删除 测试成功


badaaedc01a51127e2373ae0c73453b3.png

目录
相关文章
|
5月前
|
JavaScript API 数据处理
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(二)
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(二)
47 0
|
5月前
|
缓存 JSON 安全
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(一)
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(一)
38 0
|
7月前
|
存储 JavaScript API
LocalStorage/sessionStorage 封装 - 基于TypeScript
文章主要介绍了如何封装一个自定义 Hooks 形式的存储服务,用于在 localStorage 或者 sessionStorage 中进行持久化存储值。通过封装的方法包括 get、set、remove、clearExcept 和 clearAll,使得操作存储变得更加简单和方便。
192 1
|
7月前
|
JavaScript Go 数据库
用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。
Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。
|
JavaScript 前端开发
使用vue3+TypeScript手动封装tabs组件
使用vue3+TypeScript手动封装tabs组件
305 0
|
JavaScript 前端开发 API
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(1)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(1)
119 0
|
JavaScript API
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(2)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(2)
|
JSON JavaScript 数据格式
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(3)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(3)
106 0
|
JavaScript 前端开发 API
《现代Typescript高级教程》实战之封装Fetch
TypeScript封装Fetch 1. 安装与配置TypeScript 首先,你需要在你的机器上安装TypeScript。在命令行中输入以下命令:
422 0
|
JavaScript
antd组件库封装2-为什么要使用typescript
antd组件库封装2-为什么要使用typescript
74 0
antd组件库封装2-为什么要使用typescript