Използвайки това познато примерно приложение, научете всичко за модерния начин за съхраняване на уеб данни.

LocalStorage е уеб API, вграден в браузъри, който позволява на уеб приложенията да съхраняват двойки ключ-стойност на вашето локално устройство. Той предоставя лесен метод за съхраняване на данни, дори след като затворите браузъра си.

Можете да интегрирате LocalStorage с вашите Vue приложения, за да съхранявате списъци и други данни с малък размер. Това ви позволява да поддържате потребителски данни в различни сесии на приложението.

След този урок ще имате функционално приложение за задачи Vue, което може да добавя и премахва задачи, като съхранява данните с помощта на LocalStorage.

Настройване на приложението Vue To-Do

Преди да започнете да кодирате, уверете се, че имате инсталирали Node и NPM на вашето устройство.

За да създадете нов проект, изпълнете тази команда npm:

npm create vue

Командата ще трябва да изберете предварително зададена настройка за вашето ново приложение Vue, преди да създадете и инсталирате необходимите зависимости.

instagram viewer

Няма да имате нужда от допълнителни функции за това приложение за задачи, така че изберете „Не“ за всички налични предварително зададени настройки.

След като проектът е настроен, можете да започнете да създавате приложението за задачи с LocalStorage.

Създаване на приложението To-Do

За този урок ще създадете два Vue компонента: App.vue за цялостната структура и Todo.vue за показване на списък със задачи.

Създаване на компонент To-Do

За компонента Todo създайте нов файл, src/components/Todo.vue. Този файл ще управлява структурата на списъка със задачи.

Поставете следния код в Todo.vue файл:


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

Горният кодов фрагмент описва подробно структурата на Да направя компонент. Той настройва компонента да получава данни и да излъчва събития чрез използване съответно на подпори и персонализирани събития.

За да обясним допълнително, кодът използва Подпорки на Vue за комуникация между компоненти да получите todos масив от неговия родителски компонент, App.vue. След това използва v-for директива за изобразяване на списъци за итериране през получения масив todos.

Кодът също излъчва персонализирано събитие, премахване на задачата, с полезен товар индекс. Това ви позволява да премахнете конкретна задача със специфичен индекс в масива todos.

При щракване върху Премахване бутон, фрагментът задейства излъчването на персонализираното събитие към родителския компонент. Това показва, че сте щракнали върху бутона, подканвайки изпълнението на съответната функция, дефинирана в родителския компонент, App.vue.

Създаване на компонент за изглед на приложението

Насочете се към App.vue за да продължите изграждането на приложението Todo. The Приложение компонентът ще се справи с добавянето на нови задачи и изобразяването на Да направя компонент.

Поставете следното сценарий блок във вашия файл 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>

Горният кодов фрагмент очертава логиката на App.vue компонент. Фрагментът импортира Да направя компонент и инициализира реактивни променливи с Vue Composition API.

Кодът започва с импортирането на компонента Todo и реф функция от посочения път и vue, съответно.

След това фрагментът инициализира реактивен низ, newTodo, за да съхраните задачата, която ще въведете. Той също така инициализира празен реактивен todos масив, съдържащ списъка със задачи.

The addTodo функцията добавя нови задачи към масива todos. Ако newTodo не е празен, той се избутва в масива при потвърждение и нулира стойността newTodo, за да ви позволи да добавяте още задачи.

Функцията addTodo също извиква saveToLocalStorage, който записва масива todos в LocalStorage на браузъра. Фрагментът използва setItem метод за постигане на това и преобразува масива todos в JSON низ преди съхранение.

Той също така определя a removeTodo функция, която приема a ключ като параметър. Той използва този ключ, за да премахне съответния да направя от масива todos. След премахването функцията removeTodo извиква saveToLocalStorage, за да актуализира данните на LocalStorage.

И накрая, кодът използва getItem метод, достъпен за LocalStorage за извличане на предварително запазени задачи с ключа todos. Ако сте запазили задачи в LocalStorage на браузъра, кодът ги избутва в масива todos.

След като сте се справили с логиката на компонента App.vue, поставете следния код в шаблон блок на вашето приложение Vue, за да създадете потребителския интерфейс:


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

Шаблонът използва v-модел, метод за обвързване на данни във Vue за свързване на въведената задача към newTodo реактивен низ. Шаблонът също използва v-onдиректива за обработка на събития във Vue чрез неговата стенограма (@).

Той използва v-on, за да слуша и двете щракнете и влизам ключови събития за потвърждаване на newTodo.

И накрая, шаблонът използва Да направя компонент, който сте създали първи за изобразяване на списъка със задачи. The :todos синтаксисът предава todos масив като опора на компонента Todo.

The @remove-todo синтаксис настройва слушател на събития за улавяне на персонализираното събитие, излъчено от компонента Todo, и извикване на removeTodo функция в отговор.

След като завършите приложението, можете да изберете да го стилизирате по ваш вкус. Можете да прегледате приложението си, като изпълните тази команда:

npm run dev

Трябва да видите екран като този:

Можете да добавяте или премахвате задачи в приложението Todo. Нещо повече, благодарение на интегрирането на LocalStorage, можете да опресните приложението или да го излезете напълно; вашият подбран списък със задачи ще остане непокътнат.

Значение на LocalStorage

Интегрирането на LocalStorage в уеб приложения е от съществено значение както за начинаещи, така и за опитни разработчици. LocalStorage запознава начинаещите с постоянството на данни, като им позволява да съхраняват и извличат генерирано от потребителите съдържание.

LocalStorage е важно, тъй като можете да гарантирате, че вашите потребителски данни остават непокътнати през различните сесии. LocalStorage елиминира необходимостта от постоянна комуникация със сървъра, което води до по-бързо време за зареждане и подобрена реакция в уеб приложенията.