# What Is the DrawDB Cache Utility and How Is It Used?

> Discover the DrawDB cache utility and how it uses localStorage to persist diagram version data with load save and delete functions for efficient client-side storage.

- Repository: [drawDB/drawdb](https://github.com/drawdb-io/drawdb)
- Tags: how-to-guide
- Published: 2026-08-14

---

**The DrawDB cache utility is a lightweight client-side module in [`src/utils/cache.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/cache.js) that persists diagram version data to the browser's `localStorage` using three helper functions: `loadCache()`, `saveCache()`, and `deleteFromCache()`.**

The DrawDB cache utility provides a centralized way to store and retrieve diagram version information across browser sessions. This small but essential module keeps user work accessible after page reloads without requiring a backend database.

## Where the DrawDB Cache Utility Lives

All cache functionality resides in **[`src/utils/cache.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/cache.js)**. This single-file module exports one constant and three functions that wrap `localStorage` operations:

- **`STORAGE_KEY`** — the string `"versions_cache"` used as the `localStorage` key
- **`loadCache()`** — retrieves and parses cached data
- **`saveCache(cache)`** — serializes and stores data
- **`deleteFromCache(key)`** — removes a specific entry

## Core Implementation

The cache utility follows a straightforward pattern: read JSON from `localStorage`, manipulate it in memory as a JavaScript object, then write it back as a serialized string.

```javascript
// src/utils/cache.js
export const STORAGE_KEY = "versions_cache";

export function loadCache() {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : {};
  } catch {
    return {};
  }
}

export function saveCache(cache) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
}

export function deleteFromCache(key) {
  const cache = loadCache();
  if (cache[key]) {
    delete cache[key];
    saveCache(cache);
  }
}

```

Each function includes defensive error handling. `loadCache()` returns an empty object if parsing fails or no data exists, preventing crashes from malformed `localStorage` entries.

## How Components Use the DrawDB Cache Utility

The **`ControlPanel`** component in the editor header demonstrates practical usage of the cache utility. Located at [`src/components/EditorHeader/ControlPanel.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/EditorHeader/ControlPanel.jsx), this component imports both `deleteFromCache` and `STORAGE_KEY` to handle version management actions.

### Clearing the Entire Cache

For a complete reset, components can remove the storage key directly:

```jsx
// src/components/EditorHeader/ControlPanel.jsx (excerpt)
import { deleteFromCache, STORAGE_KEY } from "../../utils/cache";

const handleClearAll = () => {
  localStorage.removeItem(STORAGE_KEY); // wipes all version data
};

```

### Removing Specific Versions

For targeted cleanup, `deleteFromCache()` handles the read-modify-write cycle:

```jsx
const handleDeleteVersion = (id) => {
  deleteFromCache(id); // removes single entry by key
};

```

The `deleteFromCache` function automatically loads the current cache, checks for the key's existence, deletes it, and persists only if changes occurred.

## Benefits of the DrawDB Cache Utility Design

Centralizing `localStorage` logic in one module provides several advantages:

- **Consistency** — all version data uses the same key and serialization format
- **Maintainability** — changing storage mechanisms requires edits to only one file
- **Testability** — the small API surface is easy to mock in unit tests
- **Type safety** — future TypeScript migration can add interfaces to `loadCache()` and `saveCache()` without touching consumer code

## Summary

- The **DrawDB cache utility** is defined in [`src/utils/cache.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/cache.js) and manages diagram version persistence via `localStorage`
- The module exports **`loadCache()`**, **`saveCache(cache)`**, and **`deleteFromCache(key)`** for all cache operations
- The **storage key** `"versions_cache"` is exported as `STORAGE_KEY` for direct access when needed
- **ControlPanel.jsx** shows real usage: bulk cache clearing and selective version deletion
- Defensive programming with try-catch blocks ensures the app survives corrupted `localStorage` data

## Frequently Asked Questions

### What data does the DrawDB cache utility actually store?

The cache utility stores **diagram version metadata** as a JSON object keyed by version identifiers. It does not store the full diagram binary or image data—only the version tracking information needed to restore version history in the editor.

### Why does DrawDB use localStorage instead of IndexedDB for caching?

`localStorage` provides **simpler synchronous access** with no size limits for small JSON objects. The drawDB cache utility handles modest version metadata, making `localStorage`'s 5-10 MB limit sufficient without IndexedDB's asynchronous complexity.

### Can the cache utility handle storage quota exceeded errors?

The current implementation includes basic error handling in `loadCache()` that returns an empty object on parse failure. However, **`saveCache()` does not catch `QuotaExceededError`**—production deployments may want to wrap `localStorage.setItem()` in try-catch blocks to handle full storage gracefully.

### How do I completely reset DrawDB's cached data programmatically?

Import `STORAGE_KEY` from [`src/utils/cache.js`](https://github.com/drawdb-io/drawdb/blob/main/src/utils/cache.js) and call `localStorage.removeItem(STORAGE_KEY)`. This matches the pattern used in [`ControlPanel.jsx`](https://github.com/drawdb-io/drawdb/blob/main/ControlPanel.jsx) and clears all version history without affecting other `localStorage` entries your application may use.