Користећи овај познати пример апликације, сазнајте све о модерном начину складиштења веб података.

ЛоцалСтораге је веб АПИ, уграђен у прегледаче, који омогућава веб апликацијама да чувају парове кључ-вредност на вашем локалном уређају. Пружа једноставан метод за чување података, чак и након што затворите прегледач.

Можете да интегришете ЛоцалСтораге са својим Вуе апликацијама за складиштење листа и других података мале величине. Ово вам омогућава да одржавате корисничке податке у различитим сесијама апликације.

Након овог водича, имаћете функционалну Вуе апликацију која може да додаје и уклања задатке, чувајући податке користећи ЛоцалСтораге.

Подешавање Вуе То-До апликације

Пре него што почнете да кодирате, уверите се да јесте инсталирали Ноде и НПМ на вашем уређају.

Да бисте креирали нови пројекат, покрените ову нпм команду:

npm create vue

Команда ће морати да изаберете унапред подешену вредност за вашу нову Вуе апликацију пре креирања и инсталирања потребних зависности.

Неће вам требати додатне функције за ову апликацију за обавезе, па изаберите „Не“ за сва доступна унапред подешена подешавања.

instagram viewer

Са постављеним пројектом, можете започети прављење апликације за обавезе помоћу ЛоцалСтораге-а.

Креирање апликације То-До

За овај водич, креираћете две Вуе компоненте: Апп.вуе за целокупну структуру и Тодо.вуе за приказ листе задатака.

Креирање компоненте То-До

За компоненту Тодо, направите нову датотеку, срц/цомпонентс/Тодо.вуе. Ова датотека ће управљати структуром листе задатака.

Налепите следећи код у Тодо.вуе фајл:


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

Горњи исечак кода детаљно описује структуру Урадити саставни део. Поставља компоненту да прима податке и емитује догађаје коришћењем реквизита и прилагођених догађаја, респективно.

Да објасним даље, код користи Вуе реквизити за комуникацију између компоненти да прими тодос низ из његове родитељске компоненте, Апп.вуе. Затим користи в-фор директива за приказивање листа за понављање кроз примљени низ задатака.

Код такође емитује прилагођени догађај, ремове-тодо, са теретом индекс. Ово вам омогућава да уклоните одређени задатак са одређеним индексом у низу задатака.

Кликом на Уклони дугме, исечак покреће емисију прилагођеног догађаја у надређену компоненту. Ово указује да сте кликнули на дугме, подстичући извршење одговарајуће функције дефинисане у оквиру надређене компоненте, Апп.вуе.

Креирање компоненте приказа апликације

Пређите на Апп.вуе да наставите са израдом апликације Тодо. Тхе Апликација компонента ће се бавити додавањем нових задатака и приказивањем Урадити саставни део.

Залепите следеће скрипта блокирајте у вашу датотеку Апп.вуе:


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

Горњи исечак кода оцртава логику Апп.вуе саставни део. Исјечак увози Урадити компоненту и иницијализује реактивне варијабле помоћу Вуе Цомпоситион АПИ-ја.

Код почиње увозом компоненте Тодо и реф функција са наведене путање и вуе, редом.

Исјечак затим иницијализује реактивни стринг, невТодо, да сачувате задатак који ћете унети. Такође иницијализује празну реактивну тодос низ, који држи листу задатака.

Тхе аддТодо функција додаје нове задатке у тодос низ. Ако невТодо није празан, гура се у низ након потврде и ресетује вредност невТодо да би вам омогућио да додате још задатака.

Функција аддТодо такође позива савеТоЛоцалСтораге, који чува низ задатака у ЛоцалСтораге претраживача. Исјечак користи сетИтем метода да се то постигне и конвертује низ задатака у ЈСОН стринг пре складиштења.

Такође дефинише а ремовеТодо функција која узима а кључ као параметар. Користи овај тастер за уклањање одговарајућег урадити из тодос низа. Након уклањања, функција ремовеТодо позива савеТоЛоцалСтораге да ажурира податке ЛоцалСтораге.

Коначно, код користи гетИтем метод који је доступан ЛоцалСтораге-у за преузимање претходно сачуваних задатака помоћу кључа тодос. Ако сте сачували задатке у ЛоцалСтораге претраживача, код их гура у тодос низ.

Сада сте обрадили логику компоненте Апп.вуе, налепите следећи код у шаблон блок ваше Вуе апликације да бисте креирали кориснички интерфејс:


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

Шаблон користи в-модел, метод везивања података у Вуе-у да повежете унети задатак за невТодо реактивни низ. Шаблон такође користи в-ондиректива за руковање догађајима у Вуе-у кроз своју стенограм (@).

Користи в-он за слушање оба клик и ући кључни догађаји за потврду новог Тодо-а.

Коначно, шаблон користи Урадити компоненту коју сте прво креирали да бисте приказали листу задатака. Тхе :тодос синтакса пролази тодос низ као пропрат компоненти Тодо.

Тхе @ремове-тодо синтакса поставља слушалац догађаја да ухвати прилагођени догађај који Тодо компонента емитује и позове ремовеТодо функционишу као одговор.

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

npm run dev

Требало би да видите екран попут овога:

Можете да додајете или уклањате задатке у оквиру апликације Тодо. Штавише, захваљујући интеграцији ЛоцалСтораге-а, можете освежити апликацију или је потпуно затворити; ваша одабрана листа обавеза ће остати нетакнута.

Важност ЛоцалСтораге

Интеграција ЛоцалСтораге у веб апликације је од суштинског значаја и за почетнике и за искусне програмере. ЛоцалСтораге упознаје почетнике са постојаношћу података омогућавајући им да чувају и преузимају садржај који генерише корисник.

ЛоцалСтораге је важан јер можете осигурати да ваши кориснички подаци остану нетакнути током различитих сесија. ЛоцалСтораге елиминише потребу за сталном комуникацијом са сервером, што доводи до бржег учитавања и побољшаног одзива у веб апликацијама.