Αποθήκευση αντικειμένων JavaScript σε HTML5 localStorage και sessionStorage

Εργασία με αντικείμενα στον χώρο αποθήκευσης Ιστού

Όταν εργάζεστε με HTML5 localStorage ή sessionStorage, οι προγραμματιστές αντιμετωπίζουν συχνά προβλήματα όταν προσπαθούν να αποθηκεύσουν αντικείμενα JavaScript. Σε αντίθεση με τους πρωτόγονους τύπους δεδομένων και τους πίνακες, τα αντικείμενα φαίνεται να μετατρέπονται σε συμβολοσειρές, γεγονός που μπορεί να οδηγήσει σε σύγχυση και απροσδόκητα αποτελέσματα.

Η κατανόηση του τρόπου σωστής αποθήκευσης και ανάκτησης αντικειμένων με χρήση του Web Storage είναι ζωτικής σημασίας για πολλές εφαρμογές web. Αυτός ο οδηγός θα διερευνήσει γιατί τα αντικείμενα μετατρέπονται σε συμβολοσειρές και θα παρέχει μια απλή λύση για να διασφαλίσετε ότι τα αντικείμενά σας αποθηκεύονται και ανακτώνται σωστά.

Εντολή	Περιγραφή
JSON.stringify()	Μετατρέπει ένα αντικείμενο ή μια τιμή JavaScript σε συμβολοσειρά JSON, επιτρέποντας αποθήκευση σε localStorage ή sessionStorage.
localStorage.setItem()	Αποθηκεύει ένα ζεύγος κλειδιού-τιμής στο αντικείμενο localStorage, επιτρέποντας στα δεδομένα να διατηρούνται στις περιόδους λειτουργίας του προγράμματος περιήγησης.
localStorage.getItem()	Ανακτά την τιμή που σχετίζεται με ένα δεδομένο κλειδί από το localStorage.
JSON.parse()	Αναλύει μια συμβολοσειρά JSON και τη μετατρέπει ξανά σε αντικείμενο JavaScript, επιτρέποντας την ανάκτηση πολύπλοκων δομών δεδομένων.
sessionStorage.setItem()	Αποθηκεύει ένα ζεύγος κλειδιού-τιμής στο αντικείμενο sessionStorage, επιτρέποντας στα δεδομένα να διατηρούνται κατά τη διάρκεια της περιόδου λειτουργίας σελίδας.
sessionStorage.getItem()	Ανακτά την τιμή που σχετίζεται με ένα δεδομένο κλειδί από το sessionStorage.

Αποτελεσματική αποθήκευση και ανάκτηση αντικειμένων στον χώρο αποθήκευσης Ιστού

Σε JavaScript, και είναι αντικείμενα αποθήκευσης ιστού που σας επιτρέπουν να αποθηκεύετε ζεύγη κλειδιών-τιμών στο πρόγραμμα περιήγησης. Ωστόσο, αυτές οι λύσεις αποθήκευσης υποστηρίζουν μόνο συμβολοσειρές, πράγμα που σημαίνει ότι η απευθείας απόπειρα αποθήκευσης ενός αντικειμένου JavaScript θα έχει ως αποτέλεσμα τη μετατροπή του αντικειμένου σε αναπαράσταση συμβολοσειράς όπως . Για να αποθηκεύσετε αντικείμενα αποτελεσματικά, πρέπει να τα μετατρέψετε σε συμβολοσειρά JSON χρησιμοποιώντας JSON.stringify(). Αυτή η μέθοδος παίρνει ένα αντικείμενο JavaScript και επιστρέφει μια συμβολοσειρά JSON, η οποία μπορεί να αποθηκευτεί σε ή .

Για να ανακτήσετε το αποθηκευμένο αντικείμενο, πρέπει να μετατρέψετε τη συμβολοσειρά JSON ξανά σε αντικείμενο JavaScript χρησιμοποιώντας . Αυτή η μέθοδος παίρνει μια συμβολοσειρά JSON και επιστρέφει το αντίστοιχο αντικείμενο JavaScript. Τα σενάρια που παρέχονται στα παραπάνω παραδείγματα δείχνουν αυτή τη διαδικασία. Αρχικά, δημιουργείται ένα αντικείμενο και μετατρέπεται σε συμβολοσειρά JSON με πριν αποθηκευτεί σε χρησιμοποιώντας localStorage.setItem(). Για την ανάκτηση του αντικειμένου, γίνεται ανάκτηση της συμβολοσειράς JSON χρησιμοποιώντας και στη συνέχεια αναλύεται ξανά σε ένα αντικείμενο JavaScript χρησιμοποιώντας .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Προηγμένες τεχνικές για αποθήκευση στο Web

Όταν χρησιμοποιείτε HTML5 και , οι προγραμματιστές χρειάζεται συχνά να αποθηκεύουν πιο σύνθετα δεδομένα από συμβολοσειρές. Ενώ η σειριοποίηση και η αποσειροποίηση JSON είναι αποτελεσματικές για βασικά αντικείμενα, τα πιο προηγμένα σενάρια ενδέχεται να απαιτούν πρόσθετες σκέψεις. Για παράδειγμα, εάν εργάζεστε με βαθιά ένθετα αντικείμενα ή αντικείμενα που περιέχουν μεθόδους, χρειάζεστε μια πιο περίπλοκη προσέγγιση. Μια κοινή τεχνική είναι η χρήση μιας βιβλιοθήκης όπως π.χ ή circular-json να χειριστεί κυκλικές αναφορές και πιο πολύπλοκες δομές αντικειμένων.

Αυτές οι βιβλιοθήκες επεκτείνουν το πρότυπο και μεθόδους για την υποστήριξη της σειριοποίησης και της αποσειριοποίησης αντικειμένων με κυκλικές αναφορές, επιτρέποντας μια πιο ισχυρή λύση για την αποθήκευση αντικειμένων σε αποθήκευση ιστού. Ένα άλλο θέμα είναι η συμπίεση δεδομένων. Για μεγάλα αντικείμενα, μπορείτε να χρησιμοποιήσετε βιβλιοθήκες όπως για να συμπιέσετε τα δεδομένα πριν τα αποθηκεύσετε localStorage ή , μειώνοντας τον χώρο που χρησιμοποιείται. Αυτό μπορεί να είναι ιδιαίτερα χρήσιμο για εφαρμογές που πρέπει να αποθηκεύουν σημαντικό όγκο δεδομένων από την πλευρά του πελάτη.

1. Μπορώ να αποθηκεύσω λειτουργίες σε ή ?
2. Όχι, οι λειτουργίες δεν μπορούν να αποθηκευτούν απευθείας στον χώρο αποθήκευσης ιστού. Μπορείτε να αποθηκεύσετε τον κωδικό συνάρτησης ως συμβολοσειρά και να τον χρησιμοποιήσετε για να το αναδημιουργήσετε, αλλά αυτό γενικά δεν συνιστάται λόγω κινδύνων ασφαλείας.
3. Πώς χειρίζομαι κυκλικές αναφορές σε αντικείμενα;
4. Χρησιμοποιήστε βιβλιοθήκες όπως ή τα οποία έχουν σχεδιαστεί για να χειρίζονται κυκλικές αναφορές σε αντικείμενα JavaScript.
5. Σε τι χρησιμεύει το όριο αποθήκευσης ?
6. Το όριο αποθήκευσης για είναι συνήθως περίπου 5 MB, αλλά μπορεί να διαφέρει μεταξύ των προγραμμάτων περιήγησης.
7. Μπορώ να συμπιέσω δεδομένα πριν τα αποθηκεύσω;
8. Ναι, μπορείτε να χρησιμοποιήσετε βιβλιοθήκες όπως για να συμπιέσετε τα δεδομένα σας πριν τα αποθηκεύσετε ή .
9. Πώς αποθηκεύω μια σειρά αντικειμένων;
10. Μετατρέψτε τον πίνακα σε συμβολοσειρά JSON χρησιμοποιώντας πριν το αποθηκεύσετε ή .
11. Είναι ασφαλής η αποθήκευση ευαίσθητων δεδομένων; ?
12. Όχι, δεν είναι ασφαλές να αποθηκεύονται ευαίσθητα δεδομένα καθώς είναι προσβάσιμο μέσω JavaScript και μπορεί να παραβιαστεί εάν ο ιστότοπος δεχτεί επίθεση.
13. Μπορώ να χρησιμοποιήσω σε διαφορετικούς τομείς;
14. Οχι, περιορίζεται στην ίδια προέλευση, που σημαίνει ότι δεν είναι δυνατή η πρόσβαση σε διαφορετικούς τομείς.
15. Τι συμβαίνει εάν ο χρήστης διαγράψει τα δεδομένα του προγράμματος περιήγησής του;
16. Όλα τα δεδομένα είναι αποθηκευμένα σε και θα αφαιρεθεί εάν ο χρήστης διαγράψει τα δεδομένα του προγράμματος περιήγησής του.

Η αποτελεσματική αποθήκευση και ανάκτηση αντικειμένων στον χώρο αποθήκευσης ιστού HTML5 απαιτεί τη μετατροπή αντικειμένων σε συμβολοσειρές JSON με και μετά αναλύοντάς τα ξανά με . Αυτή η μέθοδος διασφαλίζει ότι τα δεδομένα παραμένουν ανέπαφα και μπορούν να χρησιμοποιηθούν σε διαφορετικές περιόδους λειτουργίας προγράμματος περιήγησης. Κατανοώντας και χρησιμοποιώντας αυτές τις τεχνικές, οι προγραμματιστές μπορούν να αξιοποιήσουν το localStorage και το sessionStorage για πιο σύνθετες εργασίες διαχείρισης δεδομένων, βελτιώνοντας τη λειτουργικότητα και την απόδοση των διαδικτυακών εφαρμογών τους.