localStorage-patterns

Standardize localStorage usage with error handling, quota management, and schema migration.

Updated Aug 25, 2025
One-click install
npx skills add https://github.com/joaopelegrino/app-controle --skill localstorage-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: localStorage-patterns
Source: https://github.com/joaopelegrino/app-controle/tree/main/.claude/skills/localStorage-patterns
Command: npx skills add https://github.com/joaopelegrino/app-controle --skill localstorage-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the critical problem of unreliable client-side data persistence, preventing user data loss (notes, progress) due to browser limitations, errors like QuotaExceededError, or private browsing modes. It ensures a resilient and user-friendly experience even when storage fails.

Core Features & Use Cases

  • Robust Error Handling: Implement try/catch for all localStorage operations, gracefully handling QuotaExceededError, SecurityError, and DOMException.
  • Quota Management: Strategically manage browser storage limits (5-10MB) and enforce per-note size limits (50KB), with proactive warnings and data cleanup.
  • Schema Versioning & Migration: Design flexible JSON schemas for stored data, including versioning and migration strategies to ensure data integrity across updates.
  • Use Case: Automatically save user notes and learning progress for 227 educational modules, providing clear feedback on save status and offering fallback options if storage is full or blocked.

Quick Start

Use the localStorage-patterns skill to refactor the CNotesView component, adding robust error handling and auto-save with a 1-second debounce.

Frequently Asked Questions about localStorage-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent localStorage quota exceeded errors in React applications?

Implement try/catch blocks around all localStorage operations to catch QuotaExceededError, SecurityError, and DOMException. Set per-note size limits (50KB) and enforce strategic cleanup when quota approaches browser limits (5-10MB). Provide fallback storage to sessionStorage or memory when localStorage fails.

What's the best way to auto-save user notes without losing data?

Use debounced auto-save patterns (1-second delay recommended) with robust error handling for localStorage writes. Combine JSON schema versioning and migration strategies to ensure data integrity across updates. Log save status and offer clear feedback to users when storage operations succeed or fail.

How do I handle localStorage errors in private browsing mode?

Gracefully fall back from localStorage to sessionStorage or in-memory storage when SecurityError or QuotaExceededError exceptions occur. Test all storage layers in your error handling logic and provide users with transparent feedback about available storage options.

Can I store large note datasets reliably across browser sessions?

Design flexible JSON schemas with versioning to support data migration across updates. Enforce per-note size limits and proactive quota warnings to prevent overflow. Implement thorough testing and logging to track storage reliability across your application's data persistence lifecycle.

What error types should I handle for client-side storage operations?

Handle QuotaExceededError when storage is full, SecurityError in private browsing or restricted contexts, and DOMException for other storage failures. Wrap all localStorage reads and writes in try/catch blocks and implement fallback storage chains to maintain application resilience.

How do I version and migrate stored data when my schema changes?

Design JSON schemas with version fields and implement migration logic that transforms old data structures to new formats on read or write. This ensures existing user data remains compatible and usable when you update your storage design across multiple modules or application versions.