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

LocalStorage — это веб-API, встроенный в браузеры, который позволяет веб-приложениям хранить пары «ключ-значение» на вашем локальном устройстве. Он предоставляет простой способ хранения данных даже после закрытия браузера.

Вы можете интегрировать LocalStorage со своими приложениями Vue для хранения списков и других данных небольшого размера. Это позволяет вам хранить пользовательские данные в разных сеансах приложения.

После этого руководства у вас будет функциональное приложение Vue to-do, которое сможет добавлять и удалять задачи, сохраняя данные с помощью 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/компоненты/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 для взаимодействия между компонентами чтобы получить дела массив из его родительского компонента, App.vue. Затем он использует Директива v-for для рендеринга списков для перебора полученного массива задач.

Код также генерирует пользовательское событие, удалить-todo, с полезной нагрузкой индекс. Это позволяет удалить конкретную задачу с определенным индексом в массиве todos.

При нажатии кнопки Удалять Кнопка, фрагмент запускает отправку пользовательского события родительскому компоненту. Это означает, что вы нажали кнопку, предложив выполнить соответствующую функцию, определенную в родительском компоненте App.vue.

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

Отправляйтесь в App.vue чтобы продолжить создание приложения Todo. Приложение компонент будет обрабатывать добавление новых задач и рендеринг Делать компонент.

Вставьте следующее сценарий заблокируйте в свой файл 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 и ссылка функция по указанному пути и вид, соответственно.

Затем фрагмент инициализирует реактивную строку, новыйTodo, чтобы сохранить задачу, которую вы введете. Он также инициализирует пустой реактивный дела массив, содержащий список задач.

добавитьTodo Функция добавляет новые задачи в массив todos. Если newTodo не пусто, оно помещается в массив при подтверждении и сбрасывает значение newTodo, чтобы вы могли добавлять дополнительные задачи.

Функция addTodo также вызывает сохранитьToLocalStorage, который сохраняет массив задач в LocalStorage браузера. В фрагменте используется setItem метод для достижения этой цели и преобразует массив задач в строку JSON перед сохранением.

Он также определяет удалитьTodo функция, которая принимает ключ в качестве параметра. Он использует этот ключ для удаления соответствующего делать из массива задач. После удаления функция 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 чтобы связать введенную задачу с новыйTodo реактивная струна. В шаблоне также используется в-ондиректива для обработки событий в Vue через его стенографию (@).

Он использует v-on для прослушивания обоих щелкнуть и входить ключевые события для подтверждения нового Todo.

Наконец, шаблон использует Делать компонент, который вы создали первым для отображения списка задач. :тодос синтаксис передает дела массив в качестве опоры для компонента Todo.

@remove-todo синтаксис настраивает прослушиватель событий для захвата пользовательского события, созданного компонентом Todo, и вызова удалитьTodo функция в ответ.

Теперь, когда вы завершили работу над приложением, вы можете выбрать его стиль по своему вкусу. Вы можете просмотреть свое приложение, выполнив эту команду:

npm run dev

Вы должны увидеть такой экран:

Вы можете добавлять или удалять задачи в приложении Todo. Более того, благодаря интеграции LocalStorage вы можете обновить приложение или полностью выйти из него; ваш тщательно подобранный список дел останется неизменным.

Важность LocalStorage

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

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