more accurate getItem perf

Author: aaronshaf

packages/idb-cache-app/src/App.tsx

@@ -69,13 +69,16 @@ const App = () => {
 		window.location.hash = `#${params.toString()}`;
 	}, [itemSize]);
 
-	const keyCounter = useRef(0);
+	const keyCounter = useRef(
+		Number.parseInt(localStorage.getItem("keyCounter") || "0") || 0,
+	);
 	const [contentKey, saveContentKey] = useState<string>(() =>
-		deterministicHash(`initial-seed-${keyCounter.current}`),
+		deterministicHash(`seed-${keyCounter.current}`),
 	);
 
 	const encryptAndStore = useCallback(async () => {
 		const key = deterministicHash(`seed-${keyCounter.current}`);
+		localStorage.setItem("keyCounter", String(keyCounter.current));
 		keyCounter.current += 1;
 		saveContentKey(key);
 
@@ -127,6 +130,7 @@ const App = () => {
 	const clear = useCallback(async () => {
 		const start = performance.now();
 		await cache.clear();
+		localStorage.removeItem("keyCounter");
 		const end = performance.now();
 		setClearTime(end - start);
 	}, []);
@@ -161,6 +165,7 @@ const App = () => {
 													data-testid="reset-cacheKey"
 													onClick={() => {
 														localStorage.removeItem("cacheKey");
+														localStorage.removeItem("keyCounter");
 														window.location.reload();
 													}}
 												>
@@ -185,6 +190,7 @@ const App = () => {
 													data-testid="reset-cacheBuster"
 													onClick={() => {
 														localStorage.removeItem("cacheBuster");
+														localStorage.removeItem("keyCounter");
 														window.location.reload();
 													}}
 												>

packages/idb-cache-app/tests/test-1.spec.ts

@@ -2,6 +2,7 @@ import { test } from "@playwright/test";
 
 test("basics", async ({ page }) => {
   await page.goto("http://localhost:3000/#size=32");
+  await page.getByTestId("reset-cacheBuster").click();
   await page.getByRole("button", { name: "clear" }).click();
   await page.getByRole("button", { name: "count" }).click();
   await page.getByText("0", { exact: true }).click();

packages/idb-cache-app/tests/test-2.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test("cache key (1)", async ({ page }) => {
   await page.goto("http://localhost:3000/#size=32");
+  await page.getByTestId("reset-cacheBuster").click();
   await page.getByTestId("clear-button").click();
   await expect(
     page.getByTestId("count-value").getByText("------")

packages/idb-cache-app/tests/test-3.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test("cache buster (1)", async ({ page }) => {
   await page.goto("http://localhost:3000/#size=32");
+  await page.getByTestId("reset-cacheBuster").click();
   await page.getByTestId("clear-button").click();
   await page.getByTestId("count-button").click();
   await expect(page.getByTestId("count-value").getByText("0")).toBeVisible();

packages/idb-cache-app/tests/test-4.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test("20mb size item", async ({ page }) => {
   await page.goto("http://localhost:3000/#size=20480");
+  await page.getByTestId("reset-cacheBuster").click();
   await page.getByTestId("clear-button").click();
   await page.getByTestId("set-item-button").click();
   await expect(page.getByText("6u81xr")).toBeVisible();