How do you access localStorage and sessionStorage in Playwright?

Answer

localStorage and sessionStorage in Playwright

localStorage and sessionStorage are browser-only APIs, so Playwright accesses them via page.evaluate().

Read localStorage

TypeScript

// Get a specific item
const token = await page.evaluate(() => localStorage.getItem('auth_token'));
console.log(token); // "eyJhbGciOiJIUzI1NiJ9..."

// Get all localStorage items
const allItems = await page.evaluate(() => {
  const result: Record<string, string> = {};
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)!;
    result[key] = localStorage.getItem(key)!;
  }
  return result;
});

Write to localStorage

TypeScript

// Set an item
await page.evaluate(() => {
  localStorage.setItem('auth_token', 'test-jwt-token-123');
  localStorage.setItem('user_id', '42');
  localStorage.setItem('theme', 'dark');
});

Clear localStorage

TypeScript

// Remove a specific item
await page.evaluate(() => localStorage.removeItem('auth_token'));

// Clear all localStorage
await page.evaluate(() => localStorage.clear());

Set localStorage Before Page Loads (addInitScript)

TypeScript

// This runs BEFORE any page scripts — useful for setting initial state
await page.addInitScript(() => {
  localStorage.setItem('auth_token', 'pre-set-token');
  localStorage.setItem('onboarding_complete', 'true');
});

await page.goto('/app'); // localStorage is already set when app code runs

sessionStorage

TypeScript

// Same API, just use sessionStorage instead
const sessionId = await page.evaluate(() => sessionStorage.getItem('session_id'));

await page.evaluate(() => {
  sessionStorage.setItem('cart_id', 'cart-abc-123');
});

await page.evaluate(() => sessionStorage.clear());

Practical Use Case — Bypass Onboarding

TypeScript

test('skip onboarding wizard', async ({ page }) => {
  // Simulate user who has already completed onboarding
  await page.addInitScript(() => {
    localStorage.setItem('onboarding_complete', 'true');
    localStorage.setItem('user_preferences', JSON.stringify({ theme: 'dark' }));
  });

  await page.goto('/app');

  // Should skip onboarding and go straight to dashboard
  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('.onboarding-wizard')).not.toBeVisible();
});

Verify localStorage After Action

TypeScript

test('preferences saved to localStorage', async ({ page }) => {
  await page.goto('/settings');
  await page.getByLabel('Theme').selectOption('dark');
  await page.getByRole('button', { name: 'Save Preferences' }).click();

  // Verify saved
  const theme = await page.evaluate(() => localStorage.getItem('theme'));
  expect(theme).toBe('dark');
});