Το Local Storage Editor παρέχει καθαρή διεπαφή πίνακα για διαχείριση καταχωρήσεων localStorage και sessionStorage για τον τρέχοντα ιστότοπο. Περιηγηθείτε σε όλα τα ζεύγη key-value, επεξεργαστείτε τιμές inline, προσθέστε νέες καταχωρήσεις και διαγράψτε αυτές που δεν χρειάζεστε. Οι τιμές JSON ανιχνεύονται αυτόματα και μορφοποιούνται για εύκολη ανάγνωση. Εναλλαγή μεταξύ καρτελών localStorage και sessionStorage για διαχείριση αμφότερων τύπων αποθήκευσης.
Οι web εφαρμογές αποθηκεύουν τεράστιες ποσότητες κατάστασης στο localStorage και sessionStorage — προτιμήσεις χρηστών, tokens αυθεντικοποίησης, feature flags, εκχωρήσεις A/B test, περιεχόμενα καλαθιού αγορών, προσχέδια φορμών, cached αποκρίσεις API και κατάσταση UI. Το debug αυτών των τιμών στο Chrome DevTools απαιτεί πλοήγηση στην καρτέλα Application, εύρεση της ενότητας Storage και χρήση βασικού viewer key-value με περιορισμένες δυνατότητες επεξεργασίας. Το Local Storage Editor το φέρνει σε ειδικά δημιουργημένο panel με εναλλαγή αποθήκευσης με καρτέλες, inline επεξεργασία, αυτόματη μορφοποίηση JSON και μαζικές λειτουργίες. Ο πίνακας εμφανίζει κάθε ζεύγος key-value. Οι τιμές JSON ανιχνεύονται αυτόματα και εμφανίζονται με κατάλληλη μορφοποίηση. Κάντε κλικ σε οποιαδήποτε τιμή για εντός θέσης επεξεργασία — οι αλλαγές γράφονται αμέσως στο storage API.
Εναλλαγή μεταξύ localStorage και sessionStorage με κουμπιά καρτελών στην κορυφή του panel. Κάθε καρτέλα εμφανίζει τον αριθμό καταχωρήσεων (π.χ. «localStorage (12)» / «sessionStorage (3)»). Αμφότεροι τύποι αποθήκευσης διαχειρίζονται από μία διεπαφή.
Κάντε κλικ σε οποιοδήποτε κελί τιμής για εντός θέσης επεξεργασία. Για απλές τιμές, πληκτρολογήστε τη νέα συμβολοσειρά. Για τιμές JSON, ο editor επεκτείνεται σε μορφοποιημένη textarea με syntax highlighting. Οι αλλαγές αποθηκεύονται αμέσως στο storage API.
Οι τιμές JSON (αντικείμενα και πίνακες σειριοποιημένα με JSON.stringify) ανιχνεύονται αυτόματα και εμφανίζονται με κατάλληλη εσοχή και syntax highlighting. Επεξεργαστείτε το μορφοποιημένο JSON απευθείας — επανα-σειριοποιείται κατά την αποθήκευση.
Κάντε κλικ στο «Προσθήκη Καταχώρησης» για δημιουργία νέου ζεύγους key-value. Εισάγετε το όνομα κλειδιού και την τιμή (συμβολοσειρά ή JSON). Η καταχώρηση γράφεται αμέσως στο localStorage ή sessionStorage για το τρέχον domain.
Διαγράψτε μεμονωμένες καταχωρήσεις με το κουμπί διαγραφής γραμμής ή χρησιμοποιήστε «Εκκαθάριση Όλων» για κατάργηση κάθε καταχώρησης για τον τρέχοντα τύπο αποθήκευσης. Χρήσιμο για επαναφορά κατάστασης εφαρμογής κατά τη δοκιμή.
Οι αλλαγές που γίνονται στον editor αντανακλώνται αμέσως στην εφαρμογή. Αν η εφαρμογή διαβάζει τιμή από localStorage κατά την αλληλεπίδραση χρήστη, η επεξεργασία αυτής της τιμής στο panel αλλάζει αυτό που διαβάζει η εφαρμογή στη συνέχεια — χωρίς επαναφόρτωση σελίδας στις περισσότερες περιπτώσεις.
Επιθεωρήστε τιμές που έχει αποθηκεύσει η εφαρμογή σας στο localStorage. Υπάρχει το auth token; Είναι σωστά δομημένο το αντικείμενο προτίμησης χρήστη; Προκαλεί απροσδόκητη συμπεριφορά κάποια παλιά cached τιμή;
Εκκαθαρίστε όλο το localStorage για επαναφορά της εφαρμογής στην αρχική κατάσταση — χρήσιμο για δοκιμή εμπειριών πρώτης εκκίνησης, onboarding flows και προεπιλεγμένων διαμορφώσεων χωρίς εκκαθάριση δεδομένων browser για άλλους ιστότοπους.
Πολλές εφαρμογές αποθηκεύουν τιμές feature flag στο localStorage. Επεξεργαστείτε αυτές απευθείας για ενεργοποίηση ή απενεργοποίηση features χωρίς διέλευση από το UI διαχείρισης flags ή επαναφόρτωση.
Επεξεργαστείτε αποθηκευμένες προτιμήσεις χρήστη, ρυθμίσεις θέματος, επιλογές γλώσσας ή σημαίες ολοκλήρωσης onboarding για προσομοίωση διαφορετικών καταστάσεων χρήστη και δοκιμή πώς τις χειρίζεται η εφαρμογή.
Δείτε τι δεδομένα αποθηκεύουν scripts τρίτων (analytics, chat, advertising) στο localStorage του domain σας. Ελέγξτε τα δεδομένα για συμμόρφωση προστασίας προσωπικών δεδομένων και απροσδόκητη χρήση αποθήκευσης.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Local Storage Editor. Ανοίγει panel εμφανίζοντας όλες τις καταχωρήσεις localStorage για το τρέχον domain.
Κάντε κύλιση στον πίνακα key-value. Οι τιμές JSON μορφοποιούνται αυτόματα. Εναλλάξτε καρτέλες για προβολή του sessionStorage.
Κάντε κλικ σε οποιαδήποτε τιμή για inline επεξεργασία. Για τιμές JSON εμφανίζεται μορφοποιημένος editor. Οι αλλαγές αποθηκεύονται αμέσως στο storage API.
Κάντε κλικ στο «Προσθήκη Καταχώρησης» για δημιουργία νέου ζεύγους key-value. Κάντε κλικ στο εικονίδιο διαγραφής σε οποιαδήποτε γραμμή για κατάργησή της. «Εκκαθάριση Όλων» αφαιρεί τα πάντα.
Μετά την επεξεργασία τιμών αποθήκευσης, αλληλεπιδράστε με τη σελίδα για να δείτε πώς ανταποκρίνεται η εφαρμογή στα αλλαγμένα δεδομένα.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
