npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@fadaeixlii/browser-cache-manager

v1.0.2

Published

A flexible caching package for API calls and functions with multiple storage strategies

Readme

Cache Manager

A flexible caching package for API calls and functions with multiple storage strategies.

Features

  • Multiple Storage Types: Support for LocalStorage, CacheStorage, and IndexedDB
  • Caching Strategies:
    • cacheFirst: Always load from cache, only fetch if cache is empty
    • cacheFirstThenUpdate: Load from cache first, then update cache in background
  • API Call Caching: Easily cache API calls with automatic key generation based on URL, query parameters, and body
  • Function Caching: Cache any function with automatic key generation based on function name and arguments
  • Polymorphic Design: OOP architecture with a common interface for all storage drivers
  • Easy to Extend: Create your own cache drivers by extending the BaseCacheDriver

Installation

npm install @fadaeixlii/browser-cache-manager

Usage

Basic Usage

import {
  CacheManager,
  CacheDriverType,
  CacheStrategies,
} from "@fadaeixlii/browser-cache-manager";

// Create a cache manager with the desired storage type
const cacheManager = new CacheManager(CacheDriverType.LOCAL_STORAGE);

// Set data to cache
await cacheManager.set("my-key", { foo: "bar" });

// Get data from cache
const data = await cacheManager.get("my-key");
console.log(data); // { foo: 'bar' }

Caching API Calls

import {
  StrategiesManager,
  CacheStrategies,
  CacheDriverType,
} from "@fadaeixlii/browser-cache-manager";

// Cache an API call with the justCache strategy
const result = await StrategiesManager.cacheApiCall(
  "https://api.example.com/data",
  {
    params: { id: 123 },
    strategy: CacheStrategies.JUST_CACHE,
    cacheType: CacheDriverType.LOCAL_STORAGE,
  }
);

console.log(result.data); // The API response data
console.log(result.fromCache); // true if loaded from cache, false if freshly fetched

Caching Functions

import {
  StrategiesManager,
  CacheStrategies,
} from "@fadaeixlii/browser-cache-manager";

// Define an expensive function
function expensiveCalculation(a, b) {
  console.log("Calculating...");
  return a + b;
}

// Create a cached version of the function
const cachedCalculation = StrategiesManager.cacheFunction(
  expensiveCalculation,
  {
    strategy: CacheStrategies.CACHE_FIRST_THEN_UPDATE,
    cacheType: CacheDriverType.INDEXED_DB,
  }
);

// First call will execute the function
const result1 = await cachedCalculation(5, 10);
console.log(result1.data); // 15
console.log(result1.fromCache); // false

// Second call with the same arguments will use cached result
const result2 = await cachedCalculation(5, 10);
console.log(result2.data); // 15
console.log(result2.fromCache); // true

API Reference

CacheManager

The main class for managing cache operations.

// Create a new cache manager
const cacheManager = new CacheManager(CacheDriverType.LOCAL_STORAGE);

// Basic operations
await cacheManager.set(key, data);
const data = await cacheManager.get(key);
const exists = await cacheManager.has(key);
await cacheManager.delete(key);
await cacheManager.clear();

// API caching
const result = await cacheManager.cacheApiCall(url, fetchFunc, options);

// Function caching
const cachedFunc = cacheManager.cacheFunction(originalFunc, options);

StrategiesManager

A utility class for working with caching strategies.

// Cache an API call
const result = await StrategiesManager.cacheApiCall(url, options);

// Cache a function
const cachedFunc = StrategiesManager.cacheFunction(originalFunc, options);

// Create a new cache manager
const cacheManager = StrategiesManager.createCacheManager(
  CacheDriverType.INDEXED_DB
);

Cache Drivers

  • LocalStorageManager: Uses browser's localStorage
  • CacheStorageManager: Uses Cache API
  • IndexedDBManager: Uses IndexedDB

Enums

  • CacheDriverType: Available storage types (LOCAL_STORAGE, CACHE_STORAGE, INDEXED_DB)
  • CacheStrategies: Available caching strategies (JUST_CACHE, CACHE_FIRST_THEN_UPDATE)

License

MIT