Cache specific key only

[krisnapy]

Is it possible to persistence cache just for a specific key path only?

[Weixuanf]

hi this is what im doing. it seems to work.

const apiKeysToCache = [
  "/api/workflow/listMyFlows",
  "/api/job/listMyJob",
];
export function swrLocalStorageProvider() {
  if (typeof window === "undefined") {
    // Return a dummy storage for server-side rendering
    return new Map();
  }
  // When initializing, we restore the data from `localStorage` into a map.
  const map = new Map<string, any>(
    JSON.parse(localStorage.getItem("app-cache") || "[]"),
  );

  // Before unloading the app, we write back all the data into `localStorage`.
  window.addEventListener("beforeunload", () => {
    const cacheMap = new Map<string, any>();
    for (const key of apiKeysToCache) {
      cacheMap.set(key, map.get(key));
    }
    const appCache = JSON.stringify(Array.from(cacheMap.entries()));
    localStorage.setItem("app-cache", appCache);
  });

  // We still use the map for write & read for performance.
  return map;
}

[cc7gs]

Here's how to store in asynchronous scenarios, such as in conjunction with localForage

[krisnapy]

hi this is what im doing. it seems to work.

const apiKeysToCache = [
  "/api/workflow/listMyFlows",
  "/api/job/listMyJob",
];
export function swrLocalStorageProvider() {
  if (typeof window === "undefined") {
    // Return a dummy storage for server-side rendering
    return new Map();
  }
  // When initializing, we restore the data from `localStorage` into a map.
  const map = new Map<string, any>(
    JSON.parse(localStorage.getItem("app-cache") || "[]"),
  );

  // Before unloading the app, we write back all the data into `localStorage`.
  window.addEventListener("beforeunload", () => {
    const cacheMap = new Map<string, any>();
    for (const key of apiKeysToCache) {
      cacheMap.set(key, map.get(key));
    }
    const appCache = JSON.stringify(Array.from(cacheMap.entries()));
    localStorage.setItem("app-cache", appCache);
  });

  // We still use the map for write & read for performance.
  return map;
}

Thank you @Weixuanf 🙏🏼