Home-theater-designers
Το LocalStorage είναι ένα web API, ενσωματωμένο σε προγράμματα περιήγησης, το οποίο επιτρέπει στις εφαρμογές Ιστού να αποθηκεύουν ζεύγη κλειδιών-τιμών στην τοπική συσκευή σας. Παρέχει μια απλή μέθοδο αποθήκευσης δεδομένων, ακόμη και αφού κλείσετε το πρόγραμμα περιήγησής σας.
MUO Το βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ
Μπορείτε να ενσωματώσετε το LocalStorage με τις εφαρμογές σας Vue για να αποθηκεύσετε λίστες και άλλα δεδομένα μικρού μεγέθους. Αυτό σας επιτρέπει να διατηρείτε δεδομένα χρήστη σε διαφορετικές περιόδους σύνδεσης εφαρμογών.
Μετά από αυτό το σεμινάριο, θα έχετε μια λειτουργική εφαρμογή Vue to-do που μπορεί να προσθέτει και να αφαιρεί εργασίες, αποθηκεύοντας τα δεδομένα χρησιμοποιώντας το LocalStorage.
Ρύθμιση της εφαρμογής Vue To-Do
Πριν ξεκινήσετε την κωδικοποίηση, βεβαιωθείτε ότι έχετε εγκατεστημένα Node και NPM στη συσκευή σας .
Για να δημιουργήσετε ένα νέο έργο, εκτελέστε αυτήν την εντολή npm:
πώς να ρυθμίσετε το στατικό ip στο raspberry pi
npm create vue
Η εντολή θα σας ζητήσει να επιλέξετε μια προεπιλογή για τη νέα σας εφαρμογή Vue πριν δημιουργήσετε και εγκαταστήσετε τις απαραίτητες εξαρτήσεις.
Δεν θα χρειαστείτε επιπλέον λειτουργίες για αυτήν την εφαρμογή υποχρεώσεων, επομένως επιλέξτε 'Όχι' για όλες τις διαθέσιμες προεπιλογές.
Με τη ρύθμιση του έργου, μπορείτε να ξεκινήσετε τη δημιουργία της εφαρμογής υποχρεώσεων με το LocalStorage.
Δημιουργία της εφαρμογής To-Do
Για αυτό το σεμινάριο, θα δημιουργήσετε δύο στοιχεία Vue: App.vue για τη συνολική δομή και Todo.vue για εμφάνιση μιας λίστας εργασιών.
Δημιουργία του στοιχείου εκκρεμοτήτων
Για το στοιχείο Todo, δημιουργήστε ένα νέο αρχείο, src/components/Todo.vue . Αυτό το αρχείο θα χειριστεί τη δομή της λίστας εργασιών.
Επικολλήστε τον παρακάτω κώδικα στο Todo.vue αρχείο:
<!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
emit('remove-todo', index);
};
</script>
<template>
<div class="todo-list">
<ul>
<li v-for="(todo, index) in props.todos" :key="index" class="todo-item">
{{ todo.text }}
<button @click="removeTodo(index)" class="remove-button">
Remove
</button>
</li>
</ul>
</div>
</template>
Το παραπάνω απόσπασμα κώδικα περιγράφει λεπτομερώς τη δομή του Ολα συστατικό. Ρυθμίζει το στοιχείο ώστε να λαμβάνει δεδομένα και να εκπέμπει συμβάντα μέσω της χρήσης στηρίξεων και προσαρμοσμένων συμβάντων, αντίστοιχα.
Για να εξηγήσουμε περαιτέρω, ο κώδικας χρησιμοποιεί Υποστηρίγματα Vue για επικοινωνία μεταξύ εξαρτημάτων να λάβετε το όλα πίνακας από το μητρικό του στοιχείο, app.vue . Στη συνέχεια χρησιμοποιεί το Οδηγία v-for για απόδοση λιστών για επανάληψη μέσω του ληφθέντος πίνακα εργασιών.
Ο κώδικας εκπέμπει επίσης ένα προσαρμοσμένο συμβάν, αφαίρεση όλων , με ωφέλιμο φορτίο δείκτης . Αυτό σας επιτρέπει να αφαιρέσετε μια συγκεκριμένη εργασία με ένα συγκεκριμένο ευρετήριο στον πίνακα εργασιών.
Κάνοντας κλικ στο Αφαιρώ κουμπί, το απόσπασμα ενεργοποιεί την εκπομπή του προσαρμοσμένου συμβάντος στο γονικό στοιχείο. Αυτό υποδηλώνει ότι έχετε κάνει κλικ στο κουμπί, ζητώντας την εκτέλεση της αντίστοιχης λειτουργίας που ορίζεται στο γονικό στοιχείο, App.vue.
Δημιουργία του στοιχείου προβολής της εφαρμογής
Κατευθυνθείτε προς app.vue για να συνεχίσετε τη δημιουργία της εφαρμογής Todo. ο App Το στοιχείο θα χειριστεί την προσθήκη νέων εργασιών και την απόδοση του Ολα συστατικό.
Επικολλήστε το παρακάτω γραφή αποκλεισμός στο αρχείο App.vue:
πώς να φτιάξετε bootable windows 7 usb
<!-- App.vue -->
<script setup>
import Todo from "./components/Todo.Vue";
import { ref } from "vue";
const newTodo = ref("");
const todos = ref([]);
const addTodo = () => {
if (newTodo.value.trim() === "") return;
todos.value.push({ text: newTodo.value });
newTodo.value = "";
saveToLocalStorage();
};
const removeTodo = (key) => {
todos.value.splice(key, 1);
saveToLocalStorage();
};
const saveToLocalStorage = () => {
localStorage.setItem("todos", JSON.stringify(todos.value));
};
const savedTodos = localStorage.getItem("todos");
if (savedTodos) {
todos.value.push(...JSON.parse(savedTodos));
}
</script>
Το παραπάνω απόσπασμα κώδικα περιγράφει τη λογική του app.vue συστατικό. Το απόσπασμα εισάγει το Ολα στοιχείο και αρχικοποιεί αντιδραστικές μεταβλητές με το Vue Composition API.
Ο κώδικας ξεκινά με την εισαγωγή του στοιχείου Todo και του αναφ λειτουργία από την καθορισμένη διαδρομή και θέα , αντίστοιχα.
Στη συνέχεια, το απόσπασμα αρχικοποιεί μια αντιδραστική συμβολοσειρά, newTodo , για να αποθηκεύσετε την εργασία που θα εισαγάγετε. Αρχικοποιεί επίσης ένα κενό αντιδραστικό όλα πίνακα, κρατώντας τη λίστα εργασιών.
ο addTodo Η συνάρτηση προσθέτει νέες εργασίες στον πίνακα εργασιών. Εάν το newTodo δεν είναι κενό, ωθείται στον πίνακα κατά την επιβεβαίωση και επαναφέρει την τιμή newTodo για να σας επιτρέψει να προσθέσετε περισσότερες εργασίες.
Η συνάρτηση addTodo καλεί επίσης το saveToLocalStorage, που αποθηκεύει τον πίνακα εργασιών στο LocalStorage του προγράμματος περιήγησης. Το απόσπασμα χρησιμοποιεί το setItem μέθοδος για να επιτευχθεί αυτό και μετατρέπει τον πίνακα todos σε συμβολοσειρά JSON πριν από την αποθήκευση.
Ορίζει επίσης α removeTodo λειτουργία που παίρνει α κλειδί ως παράμετρος. Χρησιμοποιεί αυτό το κλειδί για να αφαιρέσει το αντίστοιχο όλα από τον πίνακα todos. Μετά την αφαίρεση, η συνάρτηση removeTodo καλεί το saveToLocalStorage για να ενημερώσει τα δεδομένα LocalStorage.
γιατί το πρόγραμμα περιήγησής μου είναι τόσο αργό firefox
Τέλος, ο κώδικας χρησιμοποιεί το getItem μέθοδος διαθέσιμη στο LocalStorage για ανάκτηση εργασιών που έχουν αποθηκευτεί προηγουμένως με το κλειδί εκκρεμοτήτων. Εάν έχετε αποθηκεύσει εργασίες στο LocalStorage του προγράμματος περιήγησης, ο κώδικας τις σπρώχνει στον πίνακα εργασιών.
Τώρα που έχετε χειριστεί τη λογική του στοιχείου App.vue, επικολλήστε τον ακόλουθο κώδικα στο πρότυπο μπλοκ της εφαρμογής Vue για τη δημιουργία της διεπαφής χρήστη:
<!-- App.vue -->
<template>
<div class="app">
<h1>To do List</h1>
<div class="add-todo">
<input v-model="newTodo" @keyup.enter="addTodo"
placeholder="Add a new task" class="todo-input" />
<button @click="addTodo" class="add-button">Add</button>
</div>
<Todo :todos="todos" @remove-todo="removeTodo" />
</div>
</template>
Το πρότυπο χρησιμοποιεί v-μοντέλο , μια μέθοδος δέσμευσης δεδομένων στο Vue για να συνδέσετε το εισαγόμενο todo στο newTodo αντιδραστική συμβολοσειρά. Το πρότυπο χρησιμοποιεί επίσης το v-on οδηγία για το χειρισμό συμβάντων στο Vue μέσω της στενογραφίας του ( @ ).
Χρησιμοποιεί v-on για να ακούσει και τα δύο Κάντε κλικ και εισαγω βασικά συμβάντα για επιβεβαίωση του newTodo.
Τέλος, το πρότυπο χρησιμοποιεί το Ολα στοιχείο που δημιουργήσατε πρώτα για να αποδώσει τη λίστα των εργασιών. ο :όλα σύνταξη περνά το όλα συστοιχία ως στήριγμα στο στοιχείο Todo.
ο @αφαιρέστε τα πάντα σύνταξη ρυθμίζει ένα πρόγραμμα ακρόασης συμβάντων για να καταγράψει το προσαρμοσμένο συμβάν που εξέπεμψε το στοιχείο Todo και να το καλέσει removeTodo λειτουργούν ως απόκριση.
Τώρα που έχετε ολοκληρώσει την εφαρμογή, μπορείτε να επιλέξετε να την διαμορφώσετε σύμφωνα με το γούστο σας. Μπορείτε να κάνετε προεπισκόπηση της εφαρμογής σας εκτελώντας αυτήν την εντολή:
npm run dev
Θα πρέπει να δείτε μια οθόνη όπως αυτή:
Μπορείτε να προσθέσετε ή να αφαιρέσετε εργασίες στην εφαρμογή Todo. Επιπλέον, χάρη στην ενσωμάτωση του LocalStorage, μπορείτε να ανανεώσετε την εφαρμογή ή να πραγματοποιήσετε πλήρη έξοδο από αυτήν. Η επιμελημένη λίστα υποχρεώσεων σας θα παραμείνει ανέπαφη.
Σημασία του LocalStorage
Η ενσωμάτωση LocalStorage σε εφαρμογές web είναι απαραίτητη τόσο για αρχάριους όσο και για έμπειρους προγραμματιστές. Το LocalStorage εισάγει στους αρχάριους τη διατήρηση δεδομένων, επιτρέποντάς τους να αποθηκεύουν και να ανακτούν περιεχόμενο που δημιουργείται από τους χρήστες.
Το LocalStorage είναι σημαντικό καθώς μπορείτε να διασφαλίσετε ότι τα δεδομένα χρήστη σας παραμένουν ανέπαφα σε διαφορετικές περιόδους σύνδεσης. Το LocalStorage εξαλείφει την ανάγκη για συνεχή επικοινωνία με διακομιστή, οδηγώντας σε ταχύτερους χρόνους φόρτωσης και βελτιωμένη απόκριση στις εφαρμογές web.