Tämän tutun mallisovelluksen avulla opit nykyaikaisesta tavasta tallentaa verkkotietoja.

LocalStorage on selaimiin sisäänrakennettu verkkosovellusliittymä, jonka avulla verkkosovellukset voivat tallentaa avainarvopareja paikalliselle laitteellesi. Se tarjoaa yksinkertaisen tavan tallentaa tietoja myös selaimen sulkemisen jälkeen.

Voit integroida LocalStoragen Vue-sovelluksiisi luetteloiden ja muiden pienikokoisten tietojen tallentamiseksi. Tämän avulla voit ylläpitää käyttäjätietoja eri sovellusistunnoista.

Tämän opetusohjelman jälkeen sinulla on toimiva Vue-tehtäväsovellus, joka voi lisätä ja poistaa tehtäviä ja tallentaa tiedot LocalStoragella.

Vue To-Do -sovelluksen määrittäminen

Ennen kuin aloitat koodauksen, varmista, että sinulla on asennettu Node ja NPM laitteellesi.

Luo uusi projekti suorittamalla tämä npm-komento:

npm create vue

Komento edellyttää, että sinun on valittava esiasetus uudelle Vue-sovelluksellesi ennen tarvittavien riippuvuuksien luomista ja asentamista.

Et tarvitse lisäominaisuuksia tähän tehtäväsovellukseen, joten valitse "Ei" kaikille käytettävissä oleville esiasetuksille.

instagram viewer

Kun projekti on määritetty, voit aloittaa tehtäväsovelluksen rakentamisen LocalStoragella.

Tehtäväsovelluksen luominen

Tätä opetusohjelmaa varten luot kaksi Vue-komponenttia: App.vue yleiselle rakenteelle ja Todo.vue, joka näyttää tehtäväluettelon.

Tehtäväkomponentin luominen

Luo Todo-komponentille uusi tiedosto, src/components/Todo.vue. Tämä tiedosto käsittelee tehtäväluettelon rakenteen.

Liitä seuraava koodi kohtaan Todo.vue tiedosto:


<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>

Yllä oleva koodinpätkä kertoo sen rakenteen Tehdä komponentti. Se asettaa komponentin vastaanottamaan tietoja ja lähettämään tapahtumia käyttämällä rekvisiittaa ja mukautettuja tapahtumia, vastaavasti.

Selvittääksesi tarkemmin, koodi käyttää Vue-rekvisiitta komponenttien väliseen viestintään vastaanottamaan todos taulukko emokomponentistaan, App.vue. Sitten se käyttää v-for direktiivi renderöintiluetteloille iteroidaksesi vastaanotetun todos-taulukon läpi.

Koodi lähettää myös mukautetun tapahtuman, poista-tehtävä, hyötykuormalla indeksi. Tämän avulla voit poistaa tietyn tehtävän tietyllä indeksillä todos-taulukosta.

Napsauttamalla Poista -painiketta, katkelma käynnistää mukautetun tapahtuman lähettämisen pääkomponenttiin. Tämä osoittaa, että olet napsauttanut painiketta ja kehottanut suorittamaan vastaavan toiminnon, joka on määritetty pääkomponentissa App.vue.

Sovelluksen näkymäkomponentin luominen

Suuntaa kohti App.vue jatkaaksesi Todo-sovelluksen rakentamista. The Sovellus komponentti hoitaa uusien tehtävien lisäämisen ja hahmontamisen Tehdä komponentti.

Liitä seuraava käsikirjoitus esto App.vue-tiedostoosi:


<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>

Yllä oleva koodinpätkä hahmottelee logiikan App.vue komponentti. Katkelma tuo Tehdä komponentti ja alustaa reaktiiviset muuttujat Vue Composition API: lla.

Koodi alkaa Todo-komponentin ja viite funktio määritetystä polusta ja vue, vastaavasti.

Katkelma alustaa sitten reaktiivisen merkkijonon, uusiTodo, tallentaaksesi syöttämäsi tehtävän. Se myös alustaa tyhjän reaktiivisen todos taulukko, jolla on tehtäväluettelo.

The addTodo -toiminto lisää uusia tehtäviä todos-taulukkoon. Jos newTodo ei ole tyhjä, se työnnetään taulukkoon vahvistuksen yhteydessä ja nollaa newTodo-arvon, jotta voit lisätä tehtäviä.

AddTodo-toiminto kutsuu myös saveToLocalStorage, joka tallentaa todos-taulukon selaimen LocalStorageen. Katkelma käyttää setItem menetelmä tämän saavuttamiseksi ja muuntaa todos-taulukon JSON-merkkijonoksi ennen tallennusta.

Se määrittelee myös a PoistaTodo toiminto, joka vie a avain parametrina. Se käyttää tätä näppäintä vastaavan poistamiseen tehdä todos-joukosta. Poistamisen jälkeen removeTodo-toiminto kutsuu saveToLocalStoragea päivittääkseen LocalStorage-tiedot.

Lopuksi koodi käyttää getItem LocalStoragen käytettävissä oleva menetelmä noutaa aiemmin tallennettuja tehtäviä todos-avaimella. Jos olet tallentanut tehtäviä selaimen LocalStorageen, koodi työntää ne todos-taulukkoon.

Nyt olet käsitellyt App.vue-komponentin logiikan, liitä seuraava koodi sapluuna Vue-sovelluksesi lohko käyttöliittymän luomiseksi:


<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>

Malli käyttää v-malli, menetelmä tietojen sitomiseksi Vuessa sitoa syötetty tehtävä uusiTodo reaktiivinen merkkijono. Mallissa käytetään myös v-ondirektiivi tapahtumien käsittelystä Vuessa sen lyhenteen kautta (@).

Se käyttää v-on-toimintoa kuunnellakseen molempia klikkaus ja tulla sisään avaintapahtumat uudenTodon vahvistamiseksi.

Lopuksi malli käyttää Tehdä komponentti, jonka loit ensin tehdäksesi luettelon. The :todos syntaksi läpäisee todos taulukko Todo-komponentin rekvisiittana.

The @remove-todo syntaksi määrittää tapahtumakuuntelijan tallentamaan Todo-komponentin lähettämän mukautetun tapahtuman ja kutsumaan sitä PoistaTodo toimii vastauksena.

Nyt olet suorittanut sovelluksen, voit valita tyylisi sen makusi mukaan. Voit esikatsella sovellustasi suorittamalla tämän komennon:

npm run dev

Sinun pitäisi nähdä tällainen näyttö:

Voit lisätä tai poistaa tehtäviä Todo-sovelluksessa. Lisäksi LocalStoragen integroinnin ansiosta voit päivittää sovelluksen tai sulkea sen kokonaan. kuratoitu tehtäväluettelosi säilyy ennallaan.

LocalStoragen merkitys

LocalStoragen integrointi verkkosovelluksiin on välttämätöntä sekä aloitteleville että kokeneille kehittäjille. LocalStorage esittelee aloittelijoille tietojen pysyvyyttä antamalla heille mahdollisuuden tallentaa ja hakea käyttäjien luomaa sisältöä.

LocalStorage on tärkeä, koska voit varmistaa, että käyttäjätietosi pysyvät ennallaan eri istunnoissa. LocalStorage eliminoi jatkuvan palvelinviestinnän tarpeen, mikä nopeuttaa latausaikoja ja parantaa verkkosovellusten reagointikykyä.