每日前端小技巧 - 客户端缓存封装

前言

在前端开发中,我们经常需要使用 localStorage 或 sessionStorage 来存储数据。但原生的 Storage API 存在一些使用上的不便:

  • 只能存储字符串
  • 没有过期时间机制
  • 错误处理不够优雅
  • 前缀管理不便

今天分享一个客户端缓存封装方案,来解决以上问题。

核心实现

javascript 复制代码
class Storage {
    constructor(prefix,storage){
        this.storage = storage ?? localStorage;
        this.prefix = prefix ?? 'cache_';
    }

    getKey = (key) => {
        return `${this.prefix}${key}`;
    }

    /**
     * 写入
     * @param key
     * @param value
     * @param validTime 有效时间,单位 s
     */
    set = (key, value, validTime)=> {
        if (value === null || value === undefined) {
            this.del(key);
            return;
        }
        this.storage.setItem(
            this.getKey(key),
            JSON.stringify({
                value,
                validTime: validTime ? validTime * 1000 : undefined,
                writeTime: Date.now()
            })
        );
    }
    get = (key)=> {
        const result =  this.storage.getItem(this.getKey(key))
        if (result === null || result === undefined || result === '') {
            return null;
        }
        try {
            const { value, validTime, writeTime } = JSON.parse(result);
            if (validTime) {
                if (Date.now() - writeTime > validTime) {
                    // 已过期
                    this.del(key);
                    return null;
                }
            }
            return value;
        } catch (err) {
            console.error(`获取 ${key} 失败`, err);
            // 清除掉不合法数据,防止持续报错
            this.del(key);
            return null;
        }
    }
    del = (key)=> {
        this.storage.removeItem(this.getKey(key));
    }

    clear = ()=> {
        const keys = Object.keys(this.storage);
        keys.forEach(key => {
            if (key.startsWith(this.prefix)) {
                this.storage.removeItem(key);
            }
        });
    }
}

特性介绍

1.灵活的存储方式

javascript 复制代码
// 支持 localStorage 和 sessionStorage
const localStore = new Storage('app_', localStorage);
const sessionStore = new Storage('app_', sessionStorage);
  1. 支持数据过期
javascript 复制代码
// 设置 60 秒后过期
localStore.set('userInfo', { name: 'John' }, 60);

// 过期后自动返回 null
setTimeout(() => {
    console.log(localStore.get('userInfo')); // null
}, 61000);

3.自动序列化/反序列化

javascript 复制代码
// 支持存储对象
localStore.set('config', {
    theme: 'dark',
    language: 'zh-CN'
});

// 直接获取对象
const config = localStore.get('config');
console.log(config.theme); // 'dark'
  1. 错误处理
javascript 复制代码
// 错误处理
// 存储非法数据时自动清除
localStorage.setItem('test', '{invalid json}');
const value = localStore.get('test'); // null,并自动清除错误数据
  1. 前缀管理
javascript 复制代码
// 统一前缀管理
const localStore = new Storage('app_', localStorage);
localStore.set('userInfo', { name: 'John' });
localStore.set('config', { theme: 'dark' });
// 清除所有 app_ 开头的键值对
localStore.clear();

通过这个封装方案,我们可以更优雅地管理客户端缓存数据。如果觉得文章有帮助,欢迎点赞转发

相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript