Home-theater-designers
LocalStorage je spletni API, vgrajen v brskalnike, ki spletnim aplikacijam omogoča shranjevanje parov ključ-vrednost v vaši lokalni napravi. Zagotavlja preprosto metodo za shranjevanje podatkov, tudi ko zaprete brskalnik.
MUO Video dneva POMIKITE SE ZA NADALJEVANJE Z VSEBINO
LocalStorage lahko integrirate s svojimi aplikacijami Vue za shranjevanje seznamov in drugih podatkov majhne velikosti. To vam omogoča vzdrževanje uporabniških podatkov v različnih sejah aplikacije.
Po tej vadnici boste imeli funkcionalno aplikacijo za opravila Vue, ki lahko dodaja in odstranjuje opravila ter shranjuje podatke z uporabo LocalStorage.
Nastavitev aplikacije Vue To-Do
Preden začnete kodirati, se prepričajte, da imate nameščenih Node in NPM v vaši napravi .
Če želite ustvariti nov projekt, zaženite ta ukaz npm:
npm create vue
Ukaz bo zahteval, da izberete prednastavitev za svojo novo aplikacijo Vue, preden ustvarite in namestite potrebne odvisnosti.
Za to aplikacijo za opravila ne boste potrebovali dodatnih funkcij, zato izberite »Ne« za vse razpoložljive prednastavitve.
Ko je projekt nastavljen, lahko začnete graditi aplikacijo opravil z LocalStorage.
Ustvarjanje aplikacije To-Do
Za to vadnico boste ustvarili dve komponenti Vue: App.vue za celotno strukturo in Todo.vue za prikaz seznama opravil.
Ustvarjanje komponente To-Do
Za komponento Todo ustvarite novo datoteko, src/components/Todo.vue . Ta datoteka bo obravnavala strukturo seznama opravil.
Prilepite naslednjo kodo v Todo.vue mapa:
<!-- 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>
Zgornji delček kode podrobno opisuje strukturo Vse komponento. Nastavi komponento za sprejemanje podatkov in oddajanje dogodkov z uporabo rekvizitov oziroma dogodkov po meri.
Za nadaljnjo razlago koda uporablja Rekviziti Vue za komunikacijo med komponentami prejeti vse matriko iz nadrejene komponente, app.vue . Nato uporabi direktiva v-for za upodabljanje seznamov za ponavljanje skozi prejeto matriko opravil.
Koda odda tudi dogodek po meri, odstrani vse , s tovorom kazalo . To vam omogoča, da odstranite določeno nalogo z določenim indeksom v matriki opravil.
Ob kliku na Odstrani gumb, delček sproži oddajo dogodka po meri nadrejeni komponenti. To pomeni, da ste kliknili gumb, kar zahteva izvedbo ustrezne funkcije, definirane znotraj nadrejene komponente, App.vue.
Ustvarjanje komponente pogleda aplikacije
Pojdite na app.vue za nadaljevanje gradnje aplikacije Todo. The aplikacija komponenta bo obravnavala dodajanje novih nalog in upodabljanje Vse komponento.
Prilepite naslednje scenarij blok v datoteko App.vue:
<!-- 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>
Zgornji delček kode opisuje logiko app.vue komponento. Delček uvozi Vse komponento in inicializira reaktivne spremenljivke z API-jem Vue Composition.
Koda se začne z uvozom komponente Todo in ref funkcijo z navedene poti in pogled , oz.
Delček nato inicializira reaktivni niz, novoTodo , da shranite opravilo, ki ga boste vnesli. Prav tako inicializira prazno reaktivno vse polje, ki vsebuje seznam opravil.
The addTodo doda nova opravila v matriko opravil. Če newTodo ni prazen, se ob potrditvi potisne v matriko in ponastavi vrednost newTodo, da lahko dodate več opravil.
Funkcija addTodo prikliče tudi saveToLocalStorage, ki shrani matriko opravil v LocalStorage brskalnika. Delček uporablja setItem metoda za dosego tega in pretvori matriko opravil v niz JSON pred shranjevanjem.
računalnik nenehno izgublja internetno povezavo windows 10
Opredeljuje tudi a odstraniTodo funkcija, ki zavzame a ključ kot parameter. S tem ključem odstrani ustrezne vse iz niza todos. Po odstranitvi funkcija removeTodo pokliče saveToLocalStorage, da posodobi podatke LocalStorage.
Končno koda uporablja getItem metoda, ki je na voljo LocalStorage za pridobivanje predhodno shranjenih opravil s tipko todos. Če ste opravila shranili v LocalStorage brskalnika, jih koda potisne v matriko opravil.
Zdaj, ko ste obdelali logiko komponente App.vue, prilepite naslednjo kodo v predlogo blok vaše aplikacije Vue za ustvarjanje uporabniškega vmesnika:
<!-- 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>
Predloga uporablja v-model , metoda vezave podatkov v Vue da povežete vneseno opravilo z novoTodo reaktivni niz. Predloga uporablja tudi v-on direktiva za obravnavanje dogodkov v Vue skozi njeno okrajšavo ( @ ).
Uporablja v-on za poslušanje obeh kliknite in vstopiti ključni dogodki za potrditev newTodo.
Končno predloga uporablja Vse komponento, ki ste jo najprej ustvarili za upodobitev seznama opravil. The :vse sintaksa prehaja vse matriko kot podlago za komponento Todo.
The @odstrani-vse sintaksa nastavi poslušalca dogodkov, da zajame dogodek po meri, ki ga je oddala komponenta Todo, in pokliče odstraniTodo funkcijo kot odgovor.
Zdaj, ko ste dokončali aplikacijo, se lahko odločite, da jo oblikujete po svojem okusu. Svojo aplikacijo si lahko ogledate tako, da zaženete ta ukaz:
npm run dev
Morali bi videti tak zaslon:
V aplikaciji Todo lahko dodate ali odstranite naloge. Še več, zahvaljujoč integraciji LocalStorage lahko aplikacijo osvežite ali jo popolnoma zapustite; vaš izbrani seznam opravil bo ostal nedotaknjen.
Pomen LocalStorage
Integracija LocalStorage v spletne aplikacije je bistvena tako za začetnike kot za izkušene razvijalce. LocalStorage uvaja začetnike v obstojnost podatkov, tako da jim omogoča shranjevanje in pridobivanje uporabniško ustvarjene vsebine.
LocalStorage je pomemben, saj lahko zagotovite, da vaši uporabniški podatki ostanejo nedotaknjeni med različnimi sejami. LocalStorage odpravlja potrebo po stalni komunikaciji s strežnikom, kar vodi do hitrejšega nalaganja in izboljšane odzivnosti spletnih aplikacij.