← Volver al catálogo Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include 浏览器存储, 客户端持久化.
Ver en GitHub ↗ Copiar URL del repo Copiar enlace del SKILL.md Licencia: MIT Cómo agregar Copiar comando /plugin marketplace add bovinphang/frontend-craft El comando exacto puede variar según el repositorio. Consulta el README en GitHub.
Para el autor de la skill
Muestra que tu skill está catalogada en Skillteca, genera backlink y tráfico rastreable.
Markdown HTML
[](https://www.skillteca.com.br/skills/fec-browser-storage?utm_source=badge&utm_medium=readme&utm_campaign=badge) Copiar snippet Kit de herramientas para interactuar y probar aplicaciones web locales usando Playwright. Permite verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar capturas de pantalla del navegador y ver los registros del navegador.
Design e Frontend #test por anthropics
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que se beneficie de su identidad visual. Úselo cuando se apliquen pautas de estilo, formato visual o estándares de diseño de la empresa.
Design e Frontend por anthropics
Crea interfaces frontend distintivas y de grado de producción con alta calidad de diseño, generando código creativo y pulido y diseño de UI que evita la estética genérica de IA. Úsela para construir componentes web, páginas y aplicaciones, o para estilizar/embellecer UIs web.
Design e Frontend #css #ai por anthropics
Suite de herramientas para crear artefactos HTML elaborados y multicomponente para claude.ai, utilizando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úselo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos HTML/JSX simples de un solo archivo.
Design e Frontend #css #ai por anthropics
Alerta por categoría
Un email corto con solo las skills nuevas de Design e Frontend. 4 minutos de lectura, sin spam, te das de baja con un clic.
Confirmas tu email en el primer envío. Sin spam. Te das de baja con un clic.
浏览器存储
Purpose
根据数据大小、安全要求和生命周期选择合适的客户端存储方案。
Procedure
先判断数据敏感度、体积、生命周期、是否需要跨 Tab、是否需要随请求发送。
小量非敏感偏好用 localStorage;Tab 级临时数据用 sessionStorage;大量结构化数据或离线缓存用 IndexedDB;认证态优先 httpOnly cookie。
封装统一 key 前缀、JSON parse/stringify、异常处理、过期清理和 quota 兜底。
敏感数据按安全规则处理,不把明文 token、密码、信用卡信息放进可被 JS 读取的存储。
审查隐私模式、存储配额、清理策略和跨浏览器兼容性。
Detailed References
涉及存储选型表、localStorage/sessionStorage 封装、IndexedDB 示例、Cookie 辅助方法和敏感数据规则时,加载 references/storage-patterns.md 。
Constraints
localStorage/sessionStorage 是同步 API,大数据读写会阻塞主线程。
除 httpOnly cookie 外,客户端存储都可被 XSS 读取。
Cookie 每次请求自动携带,不适合大数据。
IndexedDB 配额和隐私模式行为有浏览器差异。
URL 中不要传 token 或敏感数据。
Expected Output
产出统一的 storage/cookie/db 封装,key 有命名空间,数据有过期或清理策略,敏感数据只进入合适的安全边界。
Leer descripción completa↓
Comentarios · Sin comentarios Aún no hay comentarios. Sé el primero.