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

The DrawDB cache utility is a lightweight client-side module in 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. 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.

// 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, 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:

// 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:

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 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 and call localStorage.removeItem(STORAGE_KEY). This matches the pattern used in ControlPanel.jsx and clears all version history without affecting other localStorage entries your application may use.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}