L'Editor de l'emmagatzematge local ofereix una interfície de taula neta per gestionar les entrades de localStorage i sessionStorage del lloc actual. Navega per tots els parells clau-valor, edita valors directament, afegeix entrades noves i elimina les que no necessitis. Els valors JSON es detecten i es formaten automàticament per a una lectura fàcil. Canvia entre les pestanyes de localStorage i sessionStorage per gestionar ambdós tipus d'emmagatzematge.
Les aplicacions web emmagatzemen una gran quantitat d'estats a localStorage i sessionStorage — preferències d'usuari, tokens d'autenticació, banderes de funcions (feature flags), assignacions de proves A/B, continguts del carretó de la compra, esborranys de formularis, respostes d'API en memòria cau i estats de la interfície d'usuari. Depurar aquests valors a les DevTools del Chrome requereix navegar fins a la pestanya Aplicació, trobar la secció d'Emmagatzematge i utilitzar un visor bàsic de clau-valor amb capacitats d'edició limitades. L'Editor de l'emmagatzematge local porta tot això a un panell dissenyat específicament amb canvi d'emmagatzematge per pestanyes, edició directa, formatació automàtica de JSON i operacions en massa. La taula mostra cada parell clau-valor amb el seu nom i contingut. Els valors JSON (que són extremadament comuns — objectes serialitzats amb JSON.stringify) es detecten automàticament i es mostren amb la formatació i el ressaltat de sintaxi adequats. Fes clic a qualsevol valor per editar-lo al moment: els canvis s'escriuen a l'API d'emmagatzematge immediatament. Afegeix entrades noves amb un formulari clar, o elimina entrades individualment o en massa.
Canvia entre localStorage i sessionStorage amb els botons de pestanya de la part superior del panell. Cada pestanya mostra el recompte d'entrades (p. ex., "localStorage (12)" / "sessionStorage (3)"). Ambdós tipus d'emmagatzematge es gestionen des d'una única interfície.
Fes clic a qualsevol cel·la de valor per editar-la directament. Per a valors simples, escriu la nova cadena. Per a valors JSON, l'editor s'amplia a una àrea de text formatada amb ressaltat de sintaxi. Els canvis es guarden a l'API d'emmagatzematge immediatament.
Els valors JSON (objectes i matrius serialitzats amb JSON.stringify) es detecten automàticament i es mostren amb el sagnat i el ressaltat de sintaxi correctes. Edita el JSON formatat directament — es torna a serialitzar quan el guardes.
Fes clic a "Afegeix entrada" per crear un nou parell clau-valor. Introdueix el nom de la clau i el valor (cadena o JSON). L'entrada s'escriu immediatament a localStorage o sessionStorage per al domini actual.
Elimina entrades individuals amb el botó d'eliminar de la fila, o utilitza "Esborra-ho tot" per eliminar cada entrada del tipus d'emmagatzematge actual. Útil per restablir l'estat de l'aplicació durant les proves.
Els canvis fets a l'editor es reflecteixen immediatament a l'aplicació. Si l'aplicació llegeix un valor de localStorage en la interacció de l'usuari, l'edició d'aquest valor al panell canvia el que l'aplicació llegeix a continuació — no cal recarregar la pàgina en la majoria dels casos.
Inspecciona quins valors té emmagatzemats la teva aplicació a localStorage. El token d'autenticació és present? L'objecte de preferència de l'usuari està estructurat correctament? Un valor obsolet de la memòria cau provoca un comportament inesperat?
Esborra tot el contingut de localStorage per restablir l'aplicació al seu estat inicial — útil per provar experiències d'usuari per primera vegada, fluxos de benvinguda i configuracions predeterminades sense esborrar dades del navegador d'altres llocs.
Moltes aplicacions emmagatzemen valors de banderes de funcions (feature flags) a localStorage. Edita'ls directament per activar o desactivar funcions sense haver de passar per la interfície de gestió de banderes ni tornar a desplegar.
Edita les preferències de l'usuari emmagatzemades, la configuració del tema, la selecció d'idioma o les banderes de finalització de la benvinguda per simular diferents estats d'usuari i provar com els gestiona l'aplicació.
Mira quines dades estan emmagatzemant els scripts de tercers (analítiques, xat, publicitat) al localStorage del teu domini. Audita les dades per verificar el compliment de la privadesa i l'ús inesperat de l'emmagatzematge.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Editor de l'emmagatzematge local. S'obre un panell que mostra totes les entrades de localStorage del domini actual.
Desplaça't per la taula de clau-valor. Els valors JSON es formaten automàticament. Canvia de pestanya per veure sessionStorage en el seu lloc.
Fes clic a qualsevol valor per editar-lo directament. Per als valors JSON, apareixerà un editor formatat. Els canvis es guarden a l'API d'emmagatzematge immediatament.
Fes clic a "Afegeix entrada" per crear un nou parell clau-valor. Fes clic a la icona de la paperera de qualsevol fila per eliminar-la. "Esborra-ho tot" ho elimina tot.
Després d'editar els valors d'emmagatzematge, interactua amb la pàgina per veure com respon l'aplicació a les dades canviades.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
