use-local-storage: Failed to set value to storage, localStor

Error message

use-local-storage: Failed to set value to storage, localStorage is blocked

What it means

A console.warn (not a thrown error) emitted by use-local-storage when writing to window.localStorage throws. The value update is not persisted; the hook's in-memory state still updates normally. It exists to inform developers why values disappear after a reload when storage is blocked.

Source

Thrown at packages/@mantine/hooks/src/use-local-storage/create-storage.ts:57

    return value;
  }
}

function createStorageHandler(type: StorageType) {
  const getItem = (key: string) => {
    try {
      return window[type].getItem(key);
    } catch (error) {
      console.warn('use-local-storage: Failed to get value from storage, localStorage is blocked');
      return null;
    }
  };

  const setItem = (key: string, value: string) => {
    try {
      window[type].setItem(key, value);
    } catch (error) {
      console.warn('use-local-storage: Failed to set value to storage, localStorage is blocked');
    }
  };

  const removeItem = (key: string) => {
    try {
      window[type].removeItem(key);
    } catch (error) {
      console.warn(
        'use-local-storage: Failed to remove value from storage, localStorage is blocked'
      );
    }
  };

  return { getItem, setItem, removeItem };
}

export type UseStorageReturnValue<T> = [
  T, // current value

View on GitHub (pinned to 8a284e2c2c)

Solutions

Confirm storage is blocked vs quota exceeded by inspecting the caught error (QuotaExceededError means reduce data size)
Serialize smaller values or add an LRU/cap before writing large state to useLocalStorage
If in an iframe, use the Storage Access API or move to first-party context
Treat as expected degradation in privacy contexts — the hook still functions without persistence

Example fix

// If quota is the issue, trim what you persist
const value = useLocalStorage({
  key: 'draft',
  defaultValue: '',
});
setLocalStorageValue(value.slice(0, 1000)); // avoid QuotaExceededError

Defensive patterns

Strategy: fallback

Validate before calling

function canWriteLocalStorage(): boolean {
  try {
    const k = '__w__';
    window.localStorage.setItem(k, 'x');
    window.localStorage.removeItem(k);
    return true;
  } catch {
    return false;
  }
}

Try / catch

// If you persist large values yourself, guard the write:
try {
  localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
  if (e instanceof DOMException && e.name === 'QuotaExceededError') {
    // prune data and retry, or skip persistence
  }
}

Prevention

Cap the size of values stored via useLocalStorage (avoid base64 blobs)
Store normalized/minimal state, derive the rest
Handle QuotaExceededError separately from blocked-storage errors
Assume persistence may silently fail in privacy modes; surface a UI hint if data loss matters

When it happens

Trigger: window.localStorage.setItem(key, value) throws — blocked storage (privacy settings, third-party context/iframe, Safari private mode), storage quota exceeded (QuotaExceededError), or SSR where localStorage is undefined. Emitted on every setValue call (including the initial write of the default value).

Common situations: Apps in third-party iframes with cookies blocked; Safari private mode; storing large objects (base64 images, big JSON) until the ~5MB quota is exceeded; privacy-focused browsers (Brave shields); automated tests with incomplete localStorage mocks.

Related errors

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/ab4a7566782b701d. Report an issue: GitHub.