Ας υποθέσουμε ότι επισκέπτομαι έναν ιστότοπο. Κάντε δεξί κλικ σε έναν από τους συνδέσμους πλοήγησης και επέλεξα να ανοίξω τον σύνδεσμο σε νέο παράθυρο. Τι πρέπει να συμβεί; Αν μου αρέσουν οι περισσότεροι χρήστες, αναμένω ότι η νέα σελίδα θα έχει το ίδιο περιεχόμενο σαν να είχα κάνει κλικ στον σύνδεσμο απευθείας. Η μόνη διαφορά πρέπει να είναι ότι η σελίδα εμφανίζεται σε ένα νέο παράθυρο. Ωστόσο, εάν ο ιστότοπός σας είναι μια εφαρμογή μίας σελίδας (SPA), ενδέχεται να δείτε παράξενα αποτελέσματα, εκτός εάν έχετε σχεδιάσει προσεκτικά για αυτήν την περίπτωση.
πόσα χρήματα βγάζουν οι εφαρμογές γνωριμιών
Θυμηθείτε ότι σε ένα SPA, ένας τυπικός σύνδεσμος πλοήγησης είναι συχνά ένα αναγνωριστικό θραύσματος, ξεκινώντας με ένα σύμβολο κατακερματισμού (#). Κάνοντας κλικ στο σύνδεσμο απευθείας δεν φορτώνει ξανά τη σελίδα, επομένως διατηρούνται όλα τα δεδομένα που είναι αποθηκευμένα σε μεταβλητές JavaScript. Αλλά αν ανοίξω τον σύνδεσμο σε μια νέα καρτέλα ή παράθυρο, το πρόγραμμα περιήγησης φορτώνει ξανά τη σελίδα, εκκινώντας εκ νέου όλες τις μεταβλητές JavaScript. Επομένως, τυχόν στοιχεία HTML που συνδέονται με αυτές τις μεταβλητές θα εμφανίζονται διαφορετικά, εκτός εάν έχετε λάβει μέτρα για να διατηρήσετε αυτά τα δεδομένα με κάποιο τρόπο.
Διαρκή δεδομένα σε επαναφορτώσεις σελίδων: Cookies, IndexedDB και οτιδήποτε άλλο Τιτίβισμα
Υπάρχει ένα παρόμοιο πρόβλημα εάν φορτώσω εκ νέου τη σελίδα ρητά, όπως πατώντας το F5. Ίσως νομίζετε ότι δεν θα έπρεπε ποτέ να χτυπήσω το F5, επειδή έχετε δημιουργήσει έναν μηχανισμό για την αυτόματη προώθηση αλλαγών από τον διακομιστή. Αλλά αν είμαι τυπικός χρήστης, μπορείτε να στοιχηματίσετε ότι θα συνεχίσω να φορτώσω ξανά τη σελίδα. Ίσως το πρόγραμμα περιήγησής μου φαίνεται να έχει ξαναβάψει την οθόνη λανθασμένα ή απλώς θέλω να είμαι σίγουρος ότι έχω τα πιο πρόσφατα αποθέματα.
Τα API μπορεί να είναι απάτριδα, η ανθρώπινη αλληλεπίδραση δεν είναι
Σε αντίθεση με ένα εσωτερικό αίτημα μέσω ενός RESTful API, η αλληλεπίδραση ενός ανθρώπου με έναν ιστότοπο δεν είναι απάτριδα. Ως χρήστης του διαδικτύου, θεωρώ την επίσκεψή μου στον ιστότοπό σας ως συνεδρία, σχεδόν σαν μια τηλεφωνική κλήση. Περιμένω από το πρόγραμμα περιήγησης να θυμάται δεδομένα σχετικά με τη συνεδρία μου, με τον ίδιο τρόπο που όταν καλέσω τη γραμμή πωλήσεων ή υποστήριξης, αναμένω από τον αντιπρόσωπο να θυμάται όσα ειπώθηκαν νωρίτερα στην κλήση.
Ένα προφανές παράδειγμα δεδομένων περιόδου σύνδεσης είναι αν είμαι συνδεδεμένος και αν ναι, ως ποιος χρήστης. Μόλις περάσω από μια οθόνη σύνδεσης, θα πρέπει να μπορώ να περιηγηθώ ελεύθερα στις σελίδες του ιστότοπου για συγκεκριμένους χρήστες. Εάν ανοίξω έναν σύνδεσμο σε μια νέα καρτέλα ή παράθυρο και μου εμφανιστεί μια άλλη οθόνη σύνδεσης, αυτό δεν είναι πολύ φιλικό προς τον χρήστη.
Ένα άλλο παράδειγμα είναι το περιεχόμενο του καλαθιού αγορών σε ένα ΗΛΕΚΤΡΟΝΙΚΟ ΕΜΠΟΡΙΟ ιστοσελίδα. Εάν χτυπήσει το F5 αδειάζει το καλάθι αγορών, οι χρήστες είναι πιθανό να αναστατωθούν.
Σε μια παραδοσιακή εφαρμογή πολλών σελίδων γραμμένη σε PHP , τα δεδομένα συνεδρίας θα αποθηκεύονταν στον πίνακα $ _SESSION superglobal. Αλλά σε ένα SPA, πρέπει να βρίσκεται κάπου από την πλευρά του πελάτη. Υπάρχουν τέσσερις κύριες επιλογές για την αποθήκευση δεδομένων περιόδου λειτουργίας σε ένα SPA:
- Μπισκότα
- Ταυτοποίηση θραύσματος
- Αποθήκευση Ιστού
- Ευρετήριο DB
Τέσσερα Kilobytes Cookies
Τα cookie είναι μια παλαιότερη μορφή αποθήκευσης ιστού στο πρόγραμμα περιήγησης. Αρχικά προορίζονταν να αποθηκεύσουν δεδομένα που ελήφθησαν από τον διακομιστή σε ένα αίτημα και να τα στείλουν ξανά στον διακομιστή σε επόμενα αιτήματα. Ωστόσο, από το JavaScript, μπορείτε να χρησιμοποιήσετε cookie για να αποθηκεύσετε σχεδόν οποιοδήποτε είδος δεδομένων, έως όριο μεγέθους 4 KB ανά cookie. Το AngularJS προσφέρει τη μονάδα ngCookies για τη διαχείριση των cookies. Υπάρχει επίσης ένα πακέτο js-cookies που παρέχει παρόμοια λειτουργικότητα σε οποιοδήποτε πλαίσιο.
Λάβετε υπόψη ότι κάθε cookie που δημιουργείτε θα αποστέλλεται στο διακομιστή για κάθε αίτημα, είτε πρόκειται για φόρτωση σελίδας είτε για αίτημα Ajax. Ωστόσο, εάν τα κύρια δεδομένα περιόδου σύνδεσης που πρέπει να αποθηκεύσετε είναι το διακριτικό πρόσβασης για τον συνδεδεμένο χρήστη, θέλετε αυτό να αποστέλλεται στον διακομιστή σε κάθε αίτημα ούτως ή άλλως. Είναι φυσικό να προσπαθήσετε να χρησιμοποιήσετε αυτήν την αυτόματη μετάδοση cookie ως το τυπικό μέσο καθορισμού του διακριτικού πρόσβασης για αιτήματα Ajax.
Μπορείτε να υποστηρίξετε ότι η χρήση cookie με αυτόν τον τρόπο είναι ασυμβίβαστη με Ξεκουραστικός αρχιτεκτονική. Αλλά σε αυτήν την περίπτωση είναι μια χαρά, καθώς κάθε αίτημα μέσω του API παραμένει απάτριδα, έχοντας κάποιες εισόδους και κάποιες εξόδους. Είναι απλώς ότι μία από τις εισόδους αποστέλλεται με έναν αστείο τρόπο, μέσω ενός cookie. Εάν μπορείτε να κανονίσετε το αίτημα API σύνδεσης για να στείλετε ξανά το διακριτικό πρόσβασης σε ένα cookie, τότε ο κωδικός πλευράς πελάτη σας δεν χρειάζεται καθόλου να χειριστεί τα cookie. Και πάλι, είναι απλώς μια άλλη έξοδος από το αίτημα που επιστρέφεται με ασυνήθιστο τρόπο.
Τα cookie προσφέρουν ένα πλεονέκτημα έναντι του χώρου αποθήκευσης στο Διαδίκτυο. Μπορείτε να παρέχετε το πλαίσιο ελέγχου 'Κρατήστε με συνδεδεμένο' στη φόρμα σύνδεσης. Με τη σημασιολογία, περιμένω αν το αφήσω ανεξέλεγκτο, θα παραμείνω συνδεδεμένος αν φορτώσω ξανά τη σελίδα ή ανοίξω έναν σύνδεσμο σε μια νέα καρτέλα ή παράθυρο, αλλά είμαι σίγουρος ότι θα αποσυνδεθώ μόλις κλείσω το πρόγραμμα περιήγησης. Αυτό είναι ένα σημαντικό χαρακτηριστικό ασφαλείας εάν χρησιμοποιώ κοινόχρηστο υπολογιστή. Όπως θα δούμε αργότερα, ο χώρος αποθήκευσης ιστού δεν υποστηρίζει αυτήν τη συμπεριφορά.
Λοιπόν, πώς μπορεί αυτή η προσέγγιση να λειτουργήσει στην πράξη; Ας υποθέσουμε ότι χρησιμοποιείτε το LoopBack από την πλευρά του διακομιστή. Ορίσατε ένα μοντέλο προσώπου, επεκτείνοντας το ενσωματωμένο μοντέλο χρήστη, προσθέτοντας τις ιδιότητες που θέλετε να διατηρήσετε για κάθε χρήστη. Έχετε διαμορφώσει το Πρόσωπο μοντέλο που θα εκτεθεί κατά το REST. Τώρα πρέπει να τροποποιήσετε το διακομιστή / server.js για να επιτύχετε την επιθυμητή συμπεριφορά cookie. Παρακάτω είναι ο διακομιστής / server.js, ξεκινώντας από αυτό που δημιουργήθηκε από το slc loopback, με τις σημαντικές αλλαγές:
var loopback = require('loopback'); var boot = require('loopback-boot'); var app = module.exports = loopback(); app.start = function() { // start the web server return app.listen(function() { app.emit('started'); var baseUrl = app.get('url').replace(//$/, ''); console.log('Web server listening at: %s', baseUrl); if (app.get('loopback-component-explorer')) { var explorerPath = app.get('loopback-component-explorer').mountPath; console.log('Browse your REST API at %s%s', baseUrl, explorerPath); } }); }; // start of first change app.use(loopback.cookieParser('secret')); // end of first change // Bootstrap the application, configure models, datasources and middleware. // Sub-apps like REST API are mounted via boot scripts. boot(app, __dirname, function(err) { if (err) throw err; // start of second change app.remotes().after('Person.login', function (ctx, next) { if (ctx.result.id) { var opts = {signed: true}; if (ctx.req.body.rememberme !== false) { opts.maxAge = 1209600000; } ctx.res.cookie('authorization', ctx.result.id, opts); } next(); }); app.remotes().after('Person.logout', function (ctx, next) { ctx.res.cookie('authorization', ''); next(); }); // end of second change // start the server if `$ node server.js` if (require.main === module) app.start(); }); Η πρώτη αλλαγή ρυθμίζει το πρόγραμμα ανάλυσης cookie ώστε να χρησιμοποιεί το «μυστικό» ως μυστικό υπογραφής cookie, επιτρέποντας έτσι τα υπογεγραμμένα cookie. Πρέπει να το κάνετε αυτό, επειδή παρόλο που το LoopBack αναζητά ένα διακριτικό πρόσβασης σε οποιοδήποτε από τα cookie «εξουσιοδότηση» ή «access_token», απαιτείται η υπογραφή ενός τέτοιου cookie. Στην πραγματικότητα, αυτή η απαίτηση είναι άσκοπη. Η υπογραφή ενός cookie έχει ως στόχο να διασφαλίσει ότι το cookie δεν έχει τροποποιηθεί. Ωστόσο, δεν υπάρχει κίνδυνος να τροποποιήσετε το διακριτικό πρόσβασης. Μετά από όλα, θα μπορούσατε να στείλετε το διακριτικό πρόσβασης σε μη υπογεγραμμένη μορφή, ως συνηθισμένη παράμετρος. Επομένως, δεν χρειάζεται να ανησυχείτε για το ότι είναι δύσκολο να μαντέψετε το μυστικό υπογραφής cookie, εκτός εάν χρησιμοποιείτε υπογεγραμμένα cookie για κάτι άλλο.
Η δεύτερη αλλαγή δημιουργεί κάποια μετα-επεξεργασία για τις μεθόδους Person.login και Person.logout. Για Πρόσωπο. Σύνδεση , θέλετε να πάρετε το προκύπτον διακριτικό πρόσβασης και να το στείλετε στον πελάτη ως επίσης η υπογεγραμμένη cookie «εξουσιοδότηση». Ο πελάτης μπορεί να προσθέσει μια ακόμη ιδιότητα στην παράμετρο διαπιστευτηρίων, να θυμάμαι, υποδεικνύοντας εάν θα διατηρήσει το cookie επίμονο για 2 εβδομάδες. Η προεπιλογή είναι αλήθεια. Η ίδια η μέθοδος σύνδεσης θα αγνοήσει αυτήν την ιδιότητα, αλλά ο μεταεπεξεργαστής θα την ελέγξει.
Για Πρόσωπο. Έξοδος , θέλετε να διαγράψετε αυτό το cookie.
Μπορείτε να δείτε τα αποτελέσματα αυτών των αλλαγών αμέσως στην Εξερεύνηση API StrongLoop. Κανονικά μετά από ένα αίτημα Person.login, θα πρέπει να αντιγράψετε το διακριτικό πρόσβασης, να το επικολλήσετε στη φόρμα επάνω δεξιά και να κάνετε κλικ στο κουμπί Ορισμός πρόσβασης. Αλλά με αυτές τις αλλαγές, δεν χρειάζεται να κάνετε κάτι τέτοιο. Το διακριτικό πρόσβασης αποθηκεύεται αυτόματα ως «εξουσιοδότηση» cookie και αποστέλλεται πίσω σε κάθε επόμενο αίτημα. Όταν ο Εξερευνητής εμφανίζει τις κεφαλίδες απόκρισης από το Person.login, παραλείπει το cookie, επειδή η JavaScript δεν επιτρέπεται ποτέ να βλέπει κεφαλίδες Set-Cookie. Αλλά να είστε σίγουροι, το cookie είναι εκεί.
Από την πλευρά του πελάτη, σε μια φόρτωση σελίδας θα δείτε αν υπάρχει η «εξουσιοδότηση» του cookie. Εάν ναι, πρέπει να ενημερώσετε την εγγραφή σας για το τρέχον UserId. Πιθανώς ο ευκολότερος τρόπος να το κάνετε αυτό είναι να αποθηκεύσετε το UserId σε ξεχωριστό cookie με επιτυχημένη σύνδεση, ώστε να μπορείτε να το ανακτήσετε σε μια φόρτωση σελίδας.
Το αναγνωριστικό θραύσματος
Καθώς επισκέπτομαι έναν ιστότοπο που έχει εφαρμοστεί ως SPA, η διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησής μου μπορεί να μοιάζει με 'https://example.com/#/my-photos/37'. Το τμήμα αναγνωριστικού τμήματος αυτού, '# / my-photos / 37', είναι ήδη μια συλλογή πληροφοριών κατάστασης που θα μπορούσαν να θεωρηθούν ως δεδομένα περιόδου σύνδεσης. Σε αυτήν την περίπτωση, πιθανότατα βλέπω μία από τις φωτογραφίες μου, αυτήν με το αναγνωριστικό 37.
c-- γλώσσα προγραμματισμού
Μπορείτε να αποφασίσετε να ενσωματώσετε άλλα δεδομένα περιόδου σύνδεσης στο αναγνωριστικό τμήματος. Θυμηθείτε ότι στην προηγούμενη ενότητα, με το διακριτικό πρόσβασης που είναι αποθηκευμένο στο cookie 'εξουσιοδότηση', θα πρέπει να παρακολουθείτε με κάποιον τρόπο το UserId. Μια επιλογή είναι να το αποθηκεύσετε σε ξεχωριστό cookie. Αλλά μια άλλη προσέγγιση είναι να ενσωματωθεί στο αναγνωριστικό θραύσματος. Θα μπορούσατε να αποφασίσετε ότι ενώ είμαι συνδεδεμένος, όλες οι σελίδες που επισκέπτομαι θα έχουν ένα αναγνωριστικό τμήματος που ξεκινά με '# / u / XXX', όπου το XXX είναι το userId. Έτσι στο προηγούμενο παράδειγμα, το αναγνωριστικό θραύσματος μπορεί να είναι '# / u / 59 / my-photos / 37' εάν το userId μου είναι 59.
Θεωρητικά, θα μπορούσατε να ενσωματώσετε το διακριτικό πρόσβασης στο αναγνωριστικό θραύσματος, αποφεύγοντας οποιαδήποτε ανάγκη για cookie ή χώρο αποθήκευσης ιστού. Αλλά αυτή θα ήταν κακή ιδέα. Στη συνέχεια, το διακριτικό πρόσβασης θα είναι ορατό στη γραμμή διευθύνσεων. Όποιος κοιτάζει πάνω από τον ώμο μου με μια κάμερα θα μπορούσε να τραβήξει ένα στιγμιότυπο της οθόνης, αποκτώντας έτσι πρόσβαση στον λογαριασμό μου.
Μια τελική σημείωση: είναι δυνατό να δημιουργήσετε ένα SPA έτσι ώστε να μην χρησιμοποιεί καθόλου αναγνωριστικά θραυσμάτων. Αντ 'αυτού, χρησιμοποιεί συνηθισμένες διευθύνσεις URL όπως 'http://example.com/app/dashboard' και 'http://example.com/app/my-photos/37', με τον διακομιστή ρυθμισμένο να επιστρέφει HTML ανώτερου επιπέδου για SPA ως απάντηση σε αίτημα για οποιαδήποτε από αυτές τις διευθύνσεις URL. Στη συνέχεια, το SPA πραγματοποιεί τη δρομολόγηση βάσει της διαδρομής (π.χ. '/ app / dashboard' ή '/ app / my-photos / 37') αντί του αναγνωριστικού τμήματος. Παρεμποδίζει κλικ σε συνδέσμους πλοήγησης και χρησιμοποιεί History.pushState () για να προωθήσετε τη νέα διεύθυνση URL και στη συνέχεια προχωράτε στη δρομολόγηση ως συνήθως. Ακούει επίσης συμβάντα popstate για να εντοπίσει τον χρήστη κάνοντας κλικ στο κουμπί πίσω και συνεχίζει πάλι με τη δρομολόγηση στο αποκατεστημένο URL. Οι πλήρεις λεπτομέρειες για το πώς να το εφαρμόσετε δεν εμπίπτουν στο πεδίο αυτού του άρθρου. Αλλά αν χρησιμοποιείτε αυτήν την τεχνική, τότε προφανώς μπορείτε να αποθηκεύσετε δεδομένα περιόδου σύνδεσης στη διαδρομή αντί για το αναγνωριστικό θραύσματος.
Αποθήκευση Ιστού
Ο χώρος αποθήκευσης ιστού είναι ένας μηχανισμός για τη JavaScript για την αποθήκευση δεδομένων στο πρόγραμμα περιήγησης. Όπως τα cookies, ο χώρος αποθήκευσης ιστού είναι ξεχωριστός για κάθε προέλευση. Κάθε αποθηκευμένο στοιχείο έχει ένα όνομα και μια τιμή, και οι δύο είναι συμβολοσειρές. Ωστόσο, ο χώρος αποθήκευσης ιστού είναι εντελώς αόρατος στον διακομιστή και προσφέρει πολύ μεγαλύτερη χωρητικότητα αποθήκευσης από τα cookie. Υπάρχουν δύο τύποι αποθήκευσης ιστού: τοπικός χώρος αποθήκευσης και χώρος αποθήκευσης συνεδρίας.
Ένα στοιχείο τοπικού χώρου αποθήκευσης είναι ορατό σε όλες τις καρτέλες όλων των παραθύρων και παραμένει ακόμη και μετά το κλείσιμο του προγράμματος περιήγησης. Από αυτήν την άποψη, συμπεριφέρεται κάπως σαν cookie με ημερομηνία λήξης πολύ μακριά στο μέλλον. Επομένως, είναι κατάλληλο για την αποθήκευση ενός διακριτικού πρόσβασης σε περίπτωση που ο χρήστης έχει επιλέξει 'κρατήστε με συνδεδεμένο' στη φόρμα σύνδεσης.
Ένα στοιχείο χώρου αποθήκευσης περιόδου λειτουργίας είναι ορατό μόνο στην καρτέλα όπου δημιουργήθηκε και εξαφανίζεται όταν αυτή η καρτέλα είναι κλειστή. Αυτό καθιστά τη διάρκεια ζωής του πολύ διαφορετική από εκείνη κάθε cookie. Θυμηθείτε ότι ένα cookie συνεδρίας εξακολουθεί να είναι ορατό σε όλες τις καρτέλες όλων των παραθύρων.
πώς να βρείτε διαρροές μνήμης στη java
Εάν χρησιμοποιείτε το AngularJS SDK για LoopBack , η πλευρά του πελάτη θα χρησιμοποιήσει αυτόματα τον χώρο αποθήκευσης ιστού για να αποθηκεύσει τόσο το διακριτικό πρόσβασης όσο και το UserId. Αυτό συμβαίνει στην υπηρεσία LoopBackAuth στο js / services / lb-services.js. Θα χρησιμοποιεί τοπικό χώρο αποθήκευσης, εκτός εάν η παράμετρος memoryMe είναι ψευδής (συνήθως σημαίνει ότι το πλαίσιο ελέγχου 'Κρατήστε μου συνδεδεμένο' δεν ήταν επιλεγμένο), οπότε θα χρησιμοποιήσει χώρο αποθήκευσης συνεδρίας.
Το αποτέλεσμα είναι ότι εάν συνδεθώ με το 'κρατήστε μου συνδεδεμένο' μη επιλεγμένο και έπειτα ανοίξω έναν σύνδεσμο σε μια νέα καρτέλα ή παράθυρο, δεν θα συνδεθώ εκεί. Πιθανότατα θα δω την οθόνη σύνδεσης. Μπορείτε να αποφασίσετε μόνοι σας εάν αυτή είναι αποδεκτή συμπεριφορά. Μερικοί μπορεί να το θεωρούν ωραίο χαρακτηριστικό, όπου μπορείτε να έχετε πολλές καρτέλες, καθεμιά από τις οποίες συνδέεται ως διαφορετικός χρήστης. Ή μπορείτε να αποφασίσετε ότι σχεδόν κανένας δεν χρησιμοποιεί πλέον κοινόχρηστους υπολογιστές, οπότε μπορείτε απλώς να παραλείψετε εντελώς το πλαίσιο ελέγχου 'Διατήρηση σύνδεσης'.
Πώς θα ήταν λοιπόν ο χειρισμός δεδομένων συνεδρίας εάν αποφασίσετε να πάτε με το AngularJS SDK για LoopBack; Ας υποθέσουμε ότι έχετε την ίδια κατάσταση όπως πριν από την πλευρά του διακομιστή: έχετε ορίσει ένα μοντέλο Person, επεκτείνοντας το μοντέλο χρήστη και έχετε εκθέσει το μοντέλο Person πέρα από το REST. Δεν θα χρησιμοποιείτε cookie, επομένως δεν θα χρειαστείτε καμία από τις αλλαγές που περιγράφηκαν προηγουμένως.
Από την πλευρά του πελάτη, κάπου στον πιο απομακρυσμένο ελεγκτή σας, πιθανότατα έχετε μια μεταβλητή όπως το $ lingkup.currentUserId που κρατά το userId του χρήστη που είναι συνδεδεμένος αυτήν τη στιγμή ή μηδέν εάν ο χρήστης δεν είναι συνδεδεμένος. Στη συνέχεια, για να χειριστείτε σωστά τις επαναφορτώσεις σελίδων, εσείς απλώς συμπεριλάβετε αυτήν τη δήλωση στη συνάρτηση του κατασκευαστή για αυτόν τον ελεγκτή:
$scope.currentUserId = Person.getCurrentId(); Είναι τόσο εύκολο. Προσθέστε το 'Πρόσωπο' ως εξάρτηση του ελεγκτή σας, εάν δεν είναι ήδη.
Ευρετήριο DB
Το IndexedDB είναι μια νεότερη δυνατότητα αποθήκευσης μεγάλων ποσοτήτων δεδομένων στο πρόγραμμα περιήγησης. Μπορείτε να το χρησιμοποιήσετε για να αποθηκεύσετε δεδομένα οποιουδήποτε τύπου JavaScript, όπως ένα αντικείμενο ή μια συστοιχία, χωρίς να χρειάζεται να το σειριοποιήσετε. Όλα τα αιτήματα στη βάση δεδομένων είναι ασύγχρονα, οπότε λαμβάνετε μια επιστροφή κλήσης όταν ολοκληρωθεί το αίτημα.
Μπορείτε να χρησιμοποιήσετε το IndexedDB για την αποθήκευση δομημένων δεδομένων που δεν σχετίζονται με οποιαδήποτε δεδομένα στο διακομιστή. Ένα παράδειγμα μπορεί να είναι ένα ημερολόγιο, μια λίστα υποχρεώσεων ή αποθηκευμένα παιχνίδια που παίζονται τοπικά. Σε αυτήν την περίπτωση, η εφαρμογή είναι πραγματικά τοπική και ο ιστότοπός σας είναι ακριβώς το μέσο για την παράδοσή της.
Προς το παρόν, ο Internet Explorer και το Safari έχουν μόνο μερική υποστήριξη για το IndexedDB. Άλλα μεγάλα προγράμματα περιήγησης το υποστηρίζουν πλήρως. Ένας σοβαρός περιορισμός αυτή τη στιγμή, ωστόσο, είναι ότι ο Firefox απενεργοποιεί το IndexedDB εξ ολοκλήρου σε λειτουργία ιδιωτικής περιήγησης.
Ως συγκεκριμένο παράδειγμα χρήσης του IndexedDB, ας πάρουμε το συρόμενη εφαρμογή παζλ από τον Pavol Daniš και τροποποιήστε το για να σώσετε την κατάσταση του πρώτου παζλ, το βασικό συρόμενο παζλ 3x3 με βάση το λογότυπο AngularJS, μετά από κάθε κίνηση. Η επαναφόρτωση της σελίδας θα αποκαταστήσει την κατάσταση αυτού του πρώτου παζλ.
Έχω δημιουργήσει ένα πιρούνι του αποθετηρίου με αυτές τις αλλαγές, οι οποίες είναι όλες στο app / js / puzzle / slidingPuzzle.js. Όπως μπορείτε να δείτε, ακόμη και μια στοιχειώδης χρήση του IndexedDB εμπλέκεται αρκετά. Θα δείξω μόνο τις καλύτερες στιγμές παρακάτω. Αρχικά, η επαναφορά της συνάρτησης καλείται κατά τη φόρτωση της σελίδας, για να ανοίξει η βάση δεδομένων IndexedDB:
/* * Tries to restore game */ this.restore = function(scope, storekey) { this.storekey = storekey; if (this.db) { this.restore2(scope); } else if (!window.indexedDB) { console.log('SlidingPuzzle: browser does not support indexedDB'); this.shuffle(); } else { var self = this; var request = window.indexedDB.open('SlidingPuzzleDatabase'); request.onerror = function(event) { console.log('SlidingPuzzle: error opening database, ' + request.error.name); scope.$apply(function() { self.shuffle(); }); }; request.onupgradeneeded = function(event) { event.target.result.createObjectStore('SlidingPuzzleStore'); }; request.onsuccess = function(event) { self.db = event.target.result; self.restore2(scope); }; } }; ο request.onupgradeneeded Το συμβάν χειρίζεται την περίπτωση όπου η βάση δεδομένων δεν υπάρχει ακόμη. Σε αυτήν την περίπτωση, δημιουργούμε το χώρο αποθήκευσης αντικειμένων.
Μόλις ανοίξει η βάση δεδομένων, η συνάρτηση επαναφορά2 καλείται, η οποία αναζητά μια εγγραφή με ένα δεδομένο κλειδί (το οποίο θα είναι στην πραγματικότητα η σταθερή «Βασική» σε αυτήν την περίπτωση):
/* * Tries to restore game, once database has been opened */ this.restore2 = function(scope) { var transaction = this.db.transaction('SlidingPuzzleStore'); var objectStore = transaction.objectStore('SlidingPuzzleStore'); var self = this; var request = objectStore.get(this.storekey); request.onerror = function(event) { console.log('SlidingPuzzle: error reading from database, ' + request.error.name); scope.$apply(function() { self.shuffle(); }); }; request.onsuccess = function(event) { if (!request.result) { console.log('SlidingPuzzle: no saved game for ' + self.storekey); scope.$apply(function() { self.shuffle(); }); } else { scope.$apply(function() { self.grid = request.result; }); } }; } Εάν υπάρχει τέτοια εγγραφή, η τιμή της αντικαθιστά τη συστοιχία πλέγματος του παζλ. Εάν υπάρχει κάποιο σφάλμα κατά την επαναφορά του παιχνιδιού, απλώς ανακατεύουμε τα πλακίδια όπως πριν. Σημειώστε ότι το πλέγμα είναι μια σειρά 3x3 αντικειμένων πλακιδίων, καθένα από τα οποία είναι αρκετά περίπλοκο. Το μεγάλο πλεονέκτημα του IndexedDB είναι ότι μπορείτε να αποθηκεύσετε και να ανακτήσετε τέτοιες τιμές χωρίς να χρειάζεται να τις σειριοποιήσετε.
Χρησιμοποιούμε ισχύουν $ να ενημερώσουμε την AngularJS ότι το μοντέλο έχει αλλάξει, οπότε η προβολή θα ενημερωθεί κατάλληλα. Αυτό συμβαίνει επειδή η ενημέρωση πραγματοποιείται εντός ενός προγράμματος χειρισμού συμβάντων DOM, επομένως το AngularJS δεν θα μπορούσε διαφορετικά να εντοπίσει την αλλαγή. Οποιαδήποτε εφαρμογή AngularJS χρησιμοποιώντας το IndexedDB πιθανότατα θα πρέπει να χρησιμοποιήσει το $ ισχύει για αυτόν τον λόγο.
Μετά από οποιαδήποτε ενέργεια που θα άλλαζε τον πίνακα πλέγματος, όπως μια κίνηση από τον χρήστη, καλείται η λειτουργία αποθήκευσης που προσθέτει ή ενημερώνει την εγγραφή με το κατάλληλο πλήκτρο, με βάση την ενημερωμένη τιμή πλέγματος:
/* * Tries to save game */ this.save = function() { if (!this.db) { return; } var transaction = this.db.transaction('SlidingPuzzleStore', 'readwrite'); var objectStore = transaction.objectStore('SlidingPuzzleStore'); var request = objectStore.put(this.grid, this.storekey); request.onerror = function(event) { console.log('SlidingPuzzle: error writing to database, ' + request.error.name); }; request.onsuccess = function(event) { // successful, no further action needed }; } Οι υπόλοιπες αλλαγές είναι να καλέσετε τις παραπάνω λειτουργίες σε κατάλληλους χρόνους. Μπορείτε να ελέγξετε το διαπράττω εμφάνιση όλων των αλλαγών. Λάβετε υπόψη ότι καλούμε επαναφορά μόνο για το βασικό παζλ και όχι για τα τρία προηγμένα παζλ. Εκμεταλλευόμαστε το γεγονός ότι οι τρεις προηγμένοι γρίφοι έχουν ένα χαρακτηριστικό api, οπότε για εκείνους που κάνουμε απλώς το τυχαίο ανακάτεμα.
πιστοποίηση συνεργάτη αρχιτέκτονα λύσεων aws
Τι γίνεται αν θέλαμε να αποθηκεύσουμε και να επαναφέρουμε τα προηγμένα παζλ; Αυτό θα απαιτούσε κάποια αναδιάρθρωση. Σε κάθε ένα από τα προηγμένα παζλ, ο χρήστης μπορεί να προσαρμόσει το αρχείο προέλευσης εικόνας και τις διαστάσεις του παζλ. Επομένως, θα πρέπει να βελτιώσουμε την τιμή που είναι αποθηκευμένη στο IndexedDB για να συμπεριλάβουμε αυτές τις πληροφορίες. Το πιο σημαντικό, χρειαζόμαστε έναν τρόπο να τα ενημερώσουμε από μια επαναφορά. Αυτό είναι λίγο για αυτό το ήδη μακρύ παράδειγμα.
συμπέρασμα
Στις περισσότερες περιπτώσεις, ο χώρος αποθήκευσης ιστού είναι το καλύτερο στοίχημά σας για την αποθήκευση δεδομένων συνεδρίας. Υποστηρίζεται πλήρως από όλα τα μεγάλα προγράμματα περιήγησης και προσφέρει πολύ μεγαλύτερη χωρητικότητα αποθήκευσης από τα cookie.
Θα χρησιμοποιούσατε cookie εάν ο διακομιστής σας έχει ήδη ρυθμιστεί να τα χρησιμοποιεί ή εάν χρειάζεστε τα δεδομένα να είναι προσβάσιμα σε όλες τις καρτέλες όλων των παραθύρων, αλλά θέλετε επίσης να διασφαλίσετε ότι θα διαγραφούν όταν το πρόγραμμα περιήγησης είναι κλειστό.
Χρησιμοποιείτε ήδη το αναγνωριστικό τμήματος για να αποθηκεύσετε δεδομένα περιόδου σύνδεσης που είναι συγκεκριμένα για αυτήν τη σελίδα, όπως το αναγνωριστικό της φωτογραφίας που βλέπει ο χρήστης. Παρόλο που θα μπορούσατε να ενσωματώσετε άλλα δεδομένα περιόδου σύνδεσης στο αναγνωριστικό τμήματος, αυτό δεν προσφέρει πραγματικά πλεονέκτημα έναντι του χώρου αποθήκευσης ιστού ή των cookie.
Η χρήση του IndexedDB είναι πιθανό να απαιτεί πολύ περισσότερη κωδικοποίηση από οποιαδήποτε άλλη τεχνική. Αλλά αν οι τιμές που αποθηκεύετε είναι σύνθετα αντικείμενα JavaScript που θα ήταν δύσκολο να σειριοποιηθούν ή εάν χρειάζεστε ένα μοντέλο συναλλαγής , τότε μπορεί να αξίζει τον κόπο.
