A Local Storage Editor egy áttekinthető táblázatos felületet biztosít az aktuális oldal localStorage és sessionStorage bejegyzéseinek kezelésére. Böngésszen az összes kulcs-érték párban, szerkessze az értékeket helyben, adjon hozzá új bejegyzéseket, és törölje a feleslegeseket. A JSON értékek automatikusan felismerésre és formázásra kerülnek a könnyebb olvashatóság érdekében. Váltson a localStorage és sessionStorage fülek között mindkét tárolótípus kezeléséhez.
A webalkalmazások hatalmas mennyiségű állapotot tárolnak a localStorage-ban és sessionStorage-ban – felhasználói beállításokat, hitelesítési tokeneket, funkciókapcsolókat, A/B teszt hozzárendeléseket, kosártartalmat, űrlaptervezeteket, gyorsítótárazott API-válaszokat és felhasználói felület állapotot. Ezen értékek hibakeresése a Chrome DevToolsban megköveteli az Application fülre navigálást, a Storage szakasz megkeresését, és egy alapszintű kulcs-érték nézegető használatát korlátozott szerkesztési lehetőségekkel. A Local Storage Editor ezt egy célzottan erre kifejlesztett panelbe integrálja, fülekre bontott tárolóváltással, helyben szerkesztéssel, automatikus JSON-formázással és tömeges műveletekkel. A táblázat minden kulcs-érték párt megjelenít a kulcs nevével és értékével. A JSON értékek (amelyek rendkívül gyakoriak – JSON.stringify-jal szerializált objektumok) automatikusan felismerésre kerülnek, és megfelelő formázással, szintaxiskiemeléssel jelennek meg. Kattintson bármelyik értékre a helyben történő szerkesztéshez – a változtatások azonnal a tárolási API-ba íródnak. Adjon hozzá új bejegyzéseket egy áttekinthető űrlappal, vagy törölje a bejegyzéseket egyenként vagy tömegesen.
Váltson a localStorage és sessionStorage között a panel tetején található fülgombokkal. Minden fül megjeleníti a bejegyzésszámot (pl. „localStorage (12)” / „sessionStorage (3)”). Mindkét tárolótípus egyetlen felületről kezelhető.
Kattintson bármelyik értékcellára a helyben történő szerkesztéshez. Egyszerű értékeknél írja be az új szöveget. JSON értékeknél a szerkesztő egy formázott, szintaxiskiemeléssel ellátott szövegdobozzá bővül. A változtatások azonnal mentésre kerülnek a tárolási API-ba.
A JSON értékek (JSON.stringify-jal szerializált objektumok és tömbök) automatikusan felismerésre kerülnek, és megfelelő behúzással, szintaxiskiemeléssel jelennek meg. Szerkessze közvetlenül a formázott JSON-t – mentéskor az újra szerializálódik.
Kattintson az „Add Entry” gombra új kulcs-érték pár létrehozásához. Adja meg a kulcs nevét és értékét (szöveg vagy JSON). A bejegyzés azonnal az aktuális domain localStorage-ába vagy sessionStorage-ába íródik.
Törölje az egyes bejegyzéseket a sor törlés gombjával, vagy használja a „Clear All” funkciót az adott tárolótípus összes bejegyzésének eltávolításához. Hasznos az alkalmazás állapotának visszaállításához teszteléskor.
A szerkesztőben végzett módosítások azonnal megjelennek az alkalmazásban. Ha az alkalmazás felhasználói interakciónál olvas be egy értéket a localStorage-ból, a panelen történő szerkesztés megváltoztatja, hogy az alkalmazás legközelebb mit olvas be – a legtöbb esetben oldalújratöltés nélkül.
Vizsgálja meg, milyen értékeket tárol az alkalmazása a localStorage-ban. Jelen van a hitelesítési token? Megfelelően van felépítve a felhasználói beállítás objektum? Egy elavult gyorsítótárazott érték okoz váratlan viselkedést?
Törölje a teljes localStorage-ot az alkalmazás kiindulási állapotba állításához – hasznos az első futtatási élmény, az onboarding folyamatok és az alapértelmezett konfigurációk tesztelésénél, anélkül hogy más oldalak böngészőadatait törölné.
Sok alkalmazás a funkciókapcsolók (feature flag) értékeit a localStorage-ban tárolja. Szerkessze ezeket közvetlenül a funkciók be- vagy kikapcsolásához, anélkül hogy át kellene mennie a kapcsolókezelő felületen vagy újra kellene telepítenie az alkalmazást.
Szerkessze a tárolt felhasználói beállításokat, témabeállításokat, nyelvi kiválasztásokat vagy onboarding befejezési jelzőket, hogy különböző felhasználói állapotokat szimuláljon, és tesztelje, hogyan kezeli azokat az alkalmazás.
Nézze meg, milyen adatokat tárolnak a harmadik féltől származó szkriptek (analitika, chat, hirdetés) az Ön domainjének localStorage-ában. Ellenőrizze az adatokat adatvédelmi megfelelőség és váratlan tárolási használat szempontjából.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson a Local Storage Editor ikonra. Egy panel nyílik meg, amely megjeleníti az aktuális domain összes localStorage bejegyzését.
Görgessen végig a kulcs-érték táblázaton. A JSON értékek automatikusan formázásra kerülnek. Váltson fület a sessionStorage megtekintéséhez.
Kattintson bármelyik értékre a helyben történő szerkesztéshez. JSON értékek esetén egy formázott szerkesztő jelenik meg. A változtatások azonnal mentésre kerülnek a tárolási API-ba.
Kattintson az „Add Entry” gombra új kulcs-érték pár létrehozásához. Kattintson bármelyik sor törlés ikonjára az eltávolításához. A „Clear All” mindent eltávolít.
A tárolt értékek szerkesztése után lépjen kapcsolatba az oldallal, hogy lássa, hogyan reagál az alkalmazás a megváltozott adatokra.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
