← Όλα τα άρθρα

Autosave και drafts σε multi-step forms: πώς δεν χάνεται μια μεγάλη αίτηση

Πώς αποθηκεύεται με ασφάλεια η πρόοδος σε φόρμες πολλών βημάτων, με local και server drafts, conflict handling, recovery και καθαρό UX.

Μια σύντομη φόρμα επικοινωνίας μπορεί να συμπληρωθεί ξανά. Μια αίτηση με δέκα βήματα, συνημμένα και στοιχεία πολλών προσώπων δεν πρέπει να χάνεται επειδή έληξε το session, έκλεισε το tab ή έπεσε προσωρινά η σύνδεση. Το autosave είναι λειτουργία αξιοπιστίας, όχι απλώς μικρή βελτίωση UX.

Η σωστή υλοποίηση χρειάζεται να απαντήσει πού αποθηκεύεται το draft, πότε θεωρείται επιτυχές, πώς ανακτάται και τι γίνεται όταν η ίδια αίτηση αλλάζει από δύο συσκευές.

Local draft και server draft εξυπηρετούν διαφορετικό σκοπό

Το local draft στον browser βοηθά πριν ο χρήστης συνδεθεί ή όταν το δίκτυο είναι προσωρινά εκτός. Για μικρά δεδομένα μπορεί να χρησιμοποιηθεί local storage, ενώ για μεγαλύτερη δομημένη πληροφορία και blobs ταιριάζει περισσότερο το IndexedDB.

Το server draft επιτρέπει συνέχεια από άλλη συσκευή, συνεργασία, ασφαλή αποθήκευση και παρακολούθηση κατάστασης. Συνδέεται με authenticated user ή με ασφαλές resume token. Για σημαντικές αιτήσεις, το local storage μόνο του δεν αποτελεί αρκετό σύστημα. Μπορεί να καθαριστεί, να μην είναι διαθέσιμο σε άλλη συσκευή ή να εκτεθεί σε scripts της ίδιας origin.

Συχνά χρησιμοποιείται υβριδικό μοντέλο: άμεσο local save για ανθεκτικότητα και περιοδικό server sync όταν υπάρχει σύνδεση.

Μην περιμένετε το κλείσιμο της σελίδας

Η αποθήκευση σε unload ή beforeunload δεν είναι αξιόπιστη. Ο browser μπορεί να τερματίσει τη σελίδα χωρίς αρκετό χρόνο για asynchronous request ή IndexedDB transaction. Η τεκμηρίωση του MDN προειδοποιεί να μη συνδέονται database transactions με unload events, επειδή μπορεί να ακυρωθούν πριν ολοκληρωθούν.

Το autosave γίνεται καθώς ο χρήστης εργάζεται, με debounce μετά από αλλαγές και checkpoints κατά την ολοκλήρωση βήματος. Το beforeunload μπορεί να χρησιμοποιηθεί μόνο ως προειδοποίηση όταν υπάρχει μη αποθηκευμένη αλλαγή, όχι ως κύριος μηχανισμός save.

Debounce και ορατή κατάσταση αποθήκευσης

Δεν χρειάζεται request σε κάθε keystroke. Ένα debounce μπορεί να περιμένει μικρό διάστημα αδράνειας και να συνδυάζει αλλαγές. Σε μεγάλα text fields μπορεί να γίνεται save ανά λίγα δευτερόλεπτα και οπωσδήποτε πριν αλλάξει step.

Το UI δείχνει πραγματική κατάσταση:

  • «Αποθήκευση…» όταν υπάρχει ενεργό request
  • «Αποθηκεύτηκε στις 14:32» μετά από server confirmation
  • «Δεν αποθηκεύτηκε, θα ξαναδοκιμάσουμε» σε προσωρινό σφάλμα
  • «Υπάρχουν αλλαγές μόνο σε αυτή τη συσκευή» όταν λείπει σύνδεση

Δεν πρέπει να εμφανίζεται πράσινο check πριν απαντήσει ο server. Αν υπάρχουν πολλαπλά saves σε εξέλιξη, μια παλιότερη αργή απάντηση δεν πρέπει να αντικαταστήσει νεότερο state. Χρησιμοποιούνται sequence numbers ή revisions.

Draft schema και partial validation

Ένα draft επιτρέπεται να είναι ελλιπές. Δεν πρέπει να εφαρμόζονται όλοι οι τελικοί required κανόνες σε κάθε autosave. Το schema διαχωρίζει draft validation από submission validation.

Στο draft ελέγχονται τύποι, μέγιστα μεγέθη και βασική ασφάλεια. Στο submit ελέγχονται όλα τα required fields, cross-step dependencies και business rules. Έτσι ο χρήστης μπορεί να αποθηκεύσει μισοτελειωμένο βήμα χωρίς να γεμίζει προσωρινές ψεύτικες τιμές.

Κάθε draft έχει schema version. Αν η φόρμα αλλάξει ενώ υπάρχουν παλιά drafts, η εφαρμογή κάνει migration ή εξηγεί ποια πεδία χρειάζονται επανέλεγχο. Δεν φορτώνει τυφλά παλιό JSON σε νέο UI.

Multi-step navigation

Το URL μπορεί να περιλαμβάνει draft ID και τρέχον step χωρίς να εκθέτει ευαίσθητο token. Ο server γνωρίζει ποια βήματα είναι προσβάσιμα και δεν εμπιστεύεται μόνο το step number του browser.

Η εφαρμογή επιτρέπει πίσω και μπροστά χωρίς να χάνει τιμές. Το summary πριν το submit αντλεί από το canonical draft και όχι από διάσπαρτο component state. Μετά το submit, το draft γίνεται immutable application ή δημιουργείται snapshot, ώστε ένα καθυστερημένο autosave να μην αλλάξει την υποβληθείσα αίτηση.

Files και uploads

Τα μεγάλα αρχεία δεν πρέπει να ξαναστέλνονται σε κάθε autosave. Ανεβαίνουν ξεχωριστά με προσωρινό upload ID και συνδέονται στο draft όταν ολοκληρωθούν. Η κατάσταση μπορεί να είναι uploading, uploaded, failed ή removed.

Τα προσωρινά αρχεία χρειάζονται antivirus ή content validation, access control και expiration. Αν το draft εγκαταλειφθεί, cleanup job διαγράφει orphan uploads μετά το retention window. Το filename δεν αποτελεί ασφαλές storage path.

Recovery μετά από διακοπή

Όταν ο χρήστης επιστρέψει, η εφαρμογή μπορεί να βρει local και server draft. Αν έχουν ίδια revision, συνεχίζει απλά. Αν διαφέρουν, συγκρίνει timestamps και fields και δεν επιλέγει σιωπηλά μια έκδοση όταν υπάρχει πραγματική σύγκρουση.

Για offline αλλαγές αποθηκεύεται mutation queue. Με την επανασύνδεση, κάθε mutation στέλνεται με base revision. Αν το server draft έχει αλλάξει, εμφανίζεται conflict screen ή γίνεται ασφαλές field-level merge.

Ασφάλεια και ιδιωτικότητα

Τα drafts μπορεί να περιέχουν περισσότερα προσωπικά δεδομένα από μια τελική αίτηση, επειδή ο χρήστης δοκιμάζει ή διορθώνει τιμές. Χρειάζονται encryption at rest, access ανά owner ή ρόλο, audit logs και συγκεκριμένο retention.

Ένα resume link πρέπει να έχει ισχυρό, ανακλητό token και περιορισμένη διάρκεια. Σε υψηλού ρίσκου αιτήσεις απαιτείται authentication ή one-time code. Τα ευαίσθητα fields δεν αποθηκεύονται στον browser αν δεν είναι απαραίτητο.

Ο χρήστης πρέπει να μπορεί να διαγράψει draft. Η λήξη εμφανίζεται καθαρά, όπως «Το πρόχειρο θα διατηρηθεί για 30 ημέρες», σύμφωνα με την πολιτική της υπηρεσίας.

Πώς το υλοποιεί η Ai Foundry

Στην Ai Foundry σχεδιάζουμε multi-step forms με canonical server draft, revisions και σαφείς save states. Προσθέτουμε local recovery μόνο όπου χρειάζεται, debounce και checkpoints ανά βήμα, ενώ ξεχωρίζουμε draft από final validation.

Για uploads χρησιμοποιούμε προσωρινά references και cleanup policies. Ελέγχουμε offline επαναφορά, λήξη session, out-of-order responses, αλλαγή schema και ταυτόχρονο edit από δύο tabs. Το αποτέλεσμα είναι φόρμες και portals όπου ο χρήστης μπορεί να διακόψει και να συνεχίσει χωρίς να αναρωτιέται αν χάθηκε η δουλειά του. Αυτό είναι κρίσιμο σε αιτήσεις, onboarding και σύνθετες B2B διαδικασίες που αναπτύσσει η Ai Foundry.

Συμπέρασμα

Το autosave είναι αξιόπιστο μόνο όταν αποθηκεύει νωρίς, επιβεβαιώνει καθαρά και μπορεί να επιλύσει παλιές ή συγκρουόμενες εκδόσεις. Με drafts, revisions και σωστό recovery, μια μεγάλη φόρμα γίνεται ανθεκτική σε πραγματικές συνθήκες χρήσης.

Πηγή