Building on the foundations of this guide on creating an in-memory cache, we’ll take it further by introducing configurable data persistence. By leveraging the Adapter and Strategy patterns, we’ll design an extensible system that decouples storage mechanisms from the caching logic, allowing seamless integration of databases or services as needed.
The Vision: Decoupling Like an ORM
The goal is to make the cache extensible without altering its core logic. Inspired by ORM systems, our approach involves a shared API abstraction. This allows storage — such as localStorage, IndexedDB, or even a remote database—to work interchangeably with minimal code changes.
The Storage Adapter Base Class
Here’s the abstract class defining the API for any persistence system:
export abstract class StorageAdapter {
abstract connect(): Promise<void>;
abstract add(key: string, value: unknown): Promise<void>;
abstract get(key: string): Promise<unknown | null>;
abstract getAll(): Promise<Record<string, unknown>>;
abstract delete(key: string): Promise<void>;
abstract clear(): Promise<void>;
}
Any storage solution must extend this base class, ensuring consistency in interaction. For instance, here’s the implementation for IndexedDB:
Example: IndexedDB Adapter
This adapter implements the StorageAdapter interface to persist cache data in an IndexedDB store.
import { StorageAdapter } from './storage_adapter';
/**
* IndexedDBAdapter is an implementation of the StorageAdapter
* interface designed to provide a persistent storage mechanism
* using IndexedDB. This adapter can be reused for other cache
* implementations or extended for similar use cases, ensuring
* flexibility and scalability.
*/
export class IndexedDBAdapter extends StorageAdapter {
private readonly dbName: string;
private readonly storeName: string;
private db: IDBDatabase | null = null;
/**
* Initializes the adapter with the specified database and store
* names. Defaults are provided to make it easy to set up without
* additional configuration.
*/
constructor(dbName: string = 'cacheDB', storeName: string = 'cacheStore') {
super();
this.dbName = dbName;
this.storeName = storeName;
}
/**
* Connects to the IndexedDB database and initializes it if
* necessary. This asynchronous method ensures that the database
* and object store are available before any other operations.
* It uses the `onupgradeneeded` event to handle schema creation
* or updates, making it a robust solution for versioning.
*/
async connect(): Promise<void> {
return await new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, 1);
request.onupgradeneeded = (event) => {
const db = (event.target as IDBOpenDBRequest).result;
if (!db.objectStoreNames.contains(this.storeName)) {
db.createObjectStore(this.storeName, { keyPath: 'key' });
}
};
request.onsuccess = (event) => {
this.db = (event.target as IDBOpenDBRequest).result;
resolve();
};
request.onerror = () => reject(request.error);
});
}
/**
* Adds or updates a key-value pair in the store. This method is
* asynchronous to ensure compatibility with the non-blocking
* nature of IndexedDB and to prevent UI thread blocking. Using
* the `put` method ensures idempotency: the operation will
* insert or replace the entry.
*/
async add(key: string, value: unknown): Promise<void> {
await this._withTransaction('readwrite', (store) => store.put({ key, value }));
}
/**
* Retrieves the value associated with a key. If the key does not
* exist, null is returned. This method is designed to integrate
* seamlessly with caching mechanisms, enabling fast lookups.
*/
async get(key: string): Promise<unknown | null> {
return await this._withTransaction('readonly', (store) =>
this._promisifyRequest(store.get(key)).then((result) =>
result ? (result as { key: string; value: unknown }).value : null
)
);
}
/**
* Fetches all key-value pairs from the store. Returns an object
* mapping keys to their values, making it suitable for bulk
* operations or syncing with in-memory caches.
*/
async getAll(): Promise<Record<string, unknown>> {
return await this._withTransaction('readonly', (store) =>
this._promisifyRequest(store.getAll()).then((results) =>
results.reduce((acc: Record<string, unknown>, item: { key: string; value: unknown }) => {
acc[item.key] = item.value;
return acc;
}, {})
)
);
}
/**
* Deletes a key-value pair by its key. This method is crucial
* for managing cache size and removing expired entries. The
* `readwrite` mode is used to ensure proper deletion.
*/
async delete(key: string): Promise<void> {
await this._withTransaction('readwrite', (store) => store.delete(key));
}
/**
* Clears all entries from the store. This method is ideal for
* scenarios where the entire cache needs to be invalidated, such
* as during application updates or environment resets.
*/
async clear(): Promise<void> {
await this._withTransaction('readwrite', (store) => store.clear());
}
/**
* Handles transactions in a reusable way. Ensures the database
* is connected and abstracts the transaction logic. By
* centralizing transaction handling, this method reduces
* boilerplate code and ensures consistency across all operations.
*/
private async _withTransaction<T>(
mode: IDBTransactionMode,
callback: (store: IDBObjectStore) => IDBRequest | Promise<T>
): Promise<T> {
if (!this.db) throw new Error('IndexedDB is not connected');
const transaction = this.db.transaction([this.storeName], mode);
const store = transaction.objectStore(this.storeName);
const result = callback(store);
return result instanceof IDBRequest ? await this._promisifyRequest(result) : await result;
}
/**
* Converts IndexedDB request events into Promises, allowing for
* cleaner and more modern asynchronous handling. This is
* essential for making IndexedDB operations fit seamlessly into
* the Promise-based architecture of JavaScript applications.
*/
private async _promisifyRequest<T>(request: IDBRequest): Promise<T> {
return await new Promise((resolve, reject) => {
request.onsuccess = () => resolve(request.result as T);
request.onerror = () => reject(request.error);
});
}
}
Integrating the Adapter into the Cache
The cache accepts an optional StorageAdapter. If provided, it initializes the database connection, loads data into memory, and keeps the cache and storage in sync.
private constructor(capacity: number, storageAdapter?: StorageAdapter) {
this.capacity = capacity;
this.storageAdapter = storageAdapter;
if (this.storageAdapter) {
this.storageAdapter.connect().catch((error) => {
throw new Error(error);
});
this.storageAdapter.getAll().then((data) => {
for (const key in data) {
this.put(key, data[key] as T);
}
}).catch((error) => {
throw new Error(error);
});
}
this.hash = new Map();
this.head = this.tail = undefined;
this.hitCount = this.missCount = this.evictionCount = 0;
}
Why Adapter and Strategy Patterns?
Using the Adapter pattern:
- Decouples the cache from specific storage mechanisms.
- Ensures extensibility for new storage backends.
Combining with the Strategy pattern:
- Enables runtime selection of the persistence layer.
- Simplifies testing by mocking different adapters.
Key Design Practices
- Abstract API: Keeps the cache logic agnostic of storage details.
- Singleton Cache: Ensures shared state consistency.
- Async Initialization: Avoids blocking operations during setup.
- Lazy Loading: Only loads persisted data when a storage adapter is provided.
Next Steps
This design is robust but leaves room for enhancements:
- Optimize sync logic for better performance.
- Experiment with additional adapters like Redis or SQLite.
Try It Out! 🚀
If you’d like to test the cache in action, it’s available as an npm package: adev-lru. You can also explore the full source code on GitHub: adev-lru repository. I welcome any recommendations, constructive feedback, or contributions to make it even better! 💡
Happy coding! 🚀
Top comments (0)