前言
在前端开发中，缓存是一个非常重要的概念。经常会有这样的情况：数据请求回来，但是只有部分数据发生了变化，重新获取所有数据会浪费带宽、时间等资源。此时，可以通过缓存来解决这个问题。而 npm 包 @zijin/cache 就是一个可以帮助我们实现缓存功能的工具包。下面，本文将详细介绍它的使用方法。
安装
@zijin/cache 是一个 npm 包，我们可以使用以下命令来安装它：
npm install @zijin/cache --save
基本使用方法
@zijin/cache 提供了两种缓存方式：memory cache 和 local storage cache。它们各有优缺点，具体选择哪一种缓存方式需要根据具体项目的情况而定。下面分别介绍这两种缓存方式的使用方法。
memory cache
-- -------------------- ---- ------- ------ - ----------- - ---- --------------- -- ---- ------ ----- -- ----- ----------- - --- -------------- -- ---- ---------------------- --------- -- ---- ----- ----------- - ----------------------- -- ---- ----------------------- -- ---- --------------------
local storage cache
-- -------------------- ---- ------- ------ - ----------------- - ---- --------------- -- ---- ----- ------- ----- -- ----- ----------------- - --- -------------------- -- ---- ---------------------------- --------- -- ---- ----- ----------- - ----------------------------- -- ---- ----------------------------- -- ---- --------------------------
高级使用方法
除了基本的操作之外，@zijin/cache 还提供了一些高级的使用方法。下面列举几个常用的例子。
设置过期时间
import { MemoryCache } from '@zijin/cache';
// 创建一个 memory cache 实例，并设置过期时间为 10s
const memoryCache = new MemoryCache({ expire: 10000 });
// 在这 10s 中，任何从 memoryCache.get('key') 中获取 'key' 缓存的结果，都是有值的。
// 超时后，再去获取 memoryCache.get('key') 就会返回 undefined。同步更新缓存
-- -------------------- ---- ------- ------ - ----------- - ---- --------------- -- ---- ------ ----- -- ----- ----------- - --- -------------- -- ---- ---------------------- --------- -- --------------- ----------------------- --------- -------- --------------- --------------------------
批量删除缓存
-- -------------------- ---- ------- ------ - ----------------- - ---- --------------- -- ---- ----- ------- ----- -- ----- ----------------- - --- -------------------- -- ---- ----------------------------- ---------- ----------------------------- ---------- -- ------ ----------------------------------- ---------
自定义序列化与反序列化函数
-- -------------------- ---- ------- ------ - ----------- - ---- --------------- -- ---- ------ ----- ----------------- ----- ----------- - --- ------------- ----------- --------------- ------------- ----------- --- -- ------------------ ---------------- --- ----- ---- - - ----- -------- ---- -- -- ----------------------- ------ -- -------------------- ------------ --- ----- ---------- - ------------------------ ----------------------------- -- -----
注意事项
- memory cache 和 local storage cache 的缓存项大小均受到浏览器的限制。例如，local storage cache 的大小限制通常为 5-10 MB。
- 在使用 local storage cache 时，需要注意浏览器所处的域名和端口号。如果不同的域名或端口号之间调用 local storage cache 的 API，则它们的数据并不会相互共享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822dd3