快捷導(dǎo)航

本地存儲(chǔ)localStorage設(shè)置過期時(shí)間示例詳解

更新時(shí)間：2023年01月15日 08:53:59 作者：小滿zs

這篇文章主要為大家介紹了本地存儲(chǔ)localStorage設(shè)置過期時(shí)間示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

思考

在我們使用cookie的時(shí)候是可以設(shè)置有效期的，但是localStorage本身是沒有該機(jī)制的，只能人為的手動(dòng)刪除，否則會(huì)一直存放在瀏覽器當(dāng)中，可不可以跟cookie一樣設(shè)置一個(gè)有效期。如果一直存放在瀏覽器又感覺有點(diǎn)浪費(fèi)，那我們可以把localStorage進(jìn)行二次封裝實(shí)現(xiàn)該方案。

實(shí)現(xiàn)思路

在存儲(chǔ)的時(shí)候設(shè)置一個(gè)過期時(shí)間，并且存儲(chǔ)的數(shù)據(jù)進(jìn)行格式化方便統(tǒng)一校驗(yàn)，在讀取的時(shí)候獲取當(dāng)前時(shí)間進(jìn)行判斷是否過期，如果過期進(jìn)行刪除即可。

代碼實(shí)現(xiàn)

目錄結(jié)構(gòu)

enum ts 定義枚舉

//字典 Dictionaries    expire過期時(shí)間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 主要邏輯實(shí)現(xiàn)

import { StorageCls, Key, expire, Data,Result } from "./type";
import { Dictionaries } from "./enum";
export class Storage implements StorageCls {
    //存儲(chǔ)接受 key value 和過期時(shí)間 默認(rèn)永久
    public set<T = any>(key: Key, value: T, expire: expire = Dictionaries.permanent) {
    //格式化數(shù)據(jù)
        const data = {
            value,
            [Dictionaries.expire]: expire
        }
        //存進(jìn)去
        localStorage.setItem(key, JSON.stringify(data))
    }
    public get<T = any>(key: Key):Result<T | null> {
        const value = localStorage.getItem(key)
        //讀出來的數(shù)據(jù)是否有效
        if (value) {
            const obj: Data<T> = JSON.parse(value)
            const now = new Date().getTime()
            //有效并且是數(shù)組類型 并且過期了 進(jìn)行刪除和提示
            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
             }
        }
    }
    //刪除某一項(xiàng)
    public remove(key:Key) {
        localStorage.removeItem(key)
    }
    //清空所有值
    public clear() {
       localStorage.clear()
    }
}

rollup.js 簡(jiǎn)易打包暫時(shí)沒有寫的很復(fù)雜所用到的依賴 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()
     ]
}

代碼測(cè)試

<!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>

測(cè)試五秒后過期增加計(jì)時(shí)器觀察值

過期之后成功刪除測(cè)試成功