Z uporabo te znane vzorčne aplikacije izvedite vse o sodobnem načinu shranjevanja spletnih podatkov.

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.

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.

instagram viewer

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:


<scriptsetup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
 emit('remove-todo', index);
};
script>
<template>
<divclass="todo-list">
<ul>
<liv-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 Narediti 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 todos 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-todo, 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 Narediti komponento.

Prilepite naslednje scenarij blok v datoteko App.vue:


<scriptsetup>
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 Narediti 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 vue, oz.

Delček nato inicializira reaktivni niz, novoTodo, da shranite opravilo, ki ga boste vnesli. Prav tako inicializira prazno reaktivno todos 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.

Opredeljuje tudi a odstraniTodo funkcija, ki zavzame a ključ kot parameter. S tem ključem odstrani ustrezne narediti 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:


<template>
<divclass="app">
<h1>To do Listh1>
<divclass="add-todo">
<inputv-model="newTodo" @keyup.enter="addTodo"
 placeholder="Add a new task" class="todo-input" />
<button @click="addTodo"class="add-button">Addbutton>
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-ondirektiva 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 Narediti komponento, ki ste jo najprej ustvarili za upodobitev seznama opravil. The :todos sintaksa prehaja todos matriko kot podlago za komponento Todo.

The @odstrani-todo 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.