Home-theater-designers
Ang LocalStorage ay isang web API, na binuo sa mga browser, na nagbibigay-daan sa mga web application na mag-imbak ng mga pares ng key-value sa iyong lokal na device. Nagbibigay ito ng isang simpleng paraan upang mag-imbak ng data, kahit na pagkatapos mong isara ang iyong browser.
MUO Video ng araw MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Maaari mong isama ang LocalStorage sa iyong mga Vue app upang mag-imbak ng mga listahan at iba pang maliit na laki ng data. Nagbibigay-daan ito sa iyong mapanatili ang data ng user sa iba't ibang session ng app.
Pagkatapos ng tutorial na ito, magkakaroon ka ng functional na Vue to-do app na maaaring magdagdag at mag-alis ng mga gawain, na nag-iimbak ng data gamit ang LocalStorage.
Pagse-set Up ng Vue To-Do Application
Bago ka magsimulang mag-coding, siguraduhing mayroon ka naka-install na Node at NPM sa iyong device .
kung paano i-update ang iTunes sa mac
Upang lumikha ng bagong proyekto, patakbuhin ang npm command na ito:
1F5A5E3C95B42A38533D4F6CB5CBBF4F023DFDE3
Kakailanganin ka ng command na pumili ng preset para sa iyong bagong Vue application bago gumawa at mag-install ng mga kinakailangang dependency.
Hindi mo kakailanganin ang mga karagdagang feature para sa to-do app na ito, kaya piliin ang 'Hindi' para sa lahat ng available na preset.
Sa pag-set up ng proyekto, maaari mong simulan ang pagbuo ng to-do application gamit ang LocalStorage.
Paggawa ng To-Do Application
Para sa tutorial na ito, gagawa ka ng dalawang bahagi ng Vue: App.vue para sa kabuuang istraktura at Todo.vue upang magpakita ng listahan ng mga gawain.
Paggawa ng Component na Dapat Gawin
Para sa bahagi ng Todo, lumikha ng bagong file, src/components/Todo.vue . Hahawakan ng file na ito ang istruktura ng listahan ng mga gawain.
I-paste ang sumusunod na code sa Todo.vue file:
<!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
emit('remove-todo', index);
};
</script>
<template>
<div class="todo-list">
<ul>
<li v-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>
Ang snippet ng code sa itaas ay nagdedetalye ng istruktura ng Lahat sangkap. Itinatakda nito ang bahagi upang makatanggap ng data at maglabas ng mga kaganapan sa pamamagitan ng paggamit ng mga props at mga custom na kaganapan, ayon sa pagkakabanggit.
Upang ipaliwanag pa, ginagamit ng code Vue props para sa pakikipag-ugnayan sa pagitan ng mga bahagi upang matanggap ang lahat array mula sa parent component nito, app.vue . Pagkatapos ay ginagamit nito ang v-para sa direktiba para sa pag-render ng mga listahan upang umulit sa natanggap na array ng todos.
Ang code ay naglalabas din ng isang pasadyang kaganapan, alisin lahat , na may payload index . Nagbibigay-daan ito sa iyong alisin ang isang partikular na gawain na may partikular na index sa array ng todos.
Sa pag-click sa Alisin button, pinalitaw ng snippet ang pagpapalabas ng custom na kaganapan sa pangunahing bahagi. Ipinapahiwatig nito na na-click mo ang button, na nag-uudyok sa pagpapatupad ng kaukulang function na tinukoy sa loob ng parent component, App.vue.
Paggawa ng View Component ng Application
Tumungo sa app.vue upang ipagpatuloy ang pagbuo ng Todo application. Ang App hahawakan ng component ang pagdaragdag ng mga bagong gawain at pag-render ng Lahat sangkap.
Idikit ang sumusunod script i-block sa iyong App.vue file:
2CFA7B6953650ECDA51C14831899236F5137AD8Binabalangkas ng snippet ng code sa itaas ang lohika ng app.vue sangkap. Ini-import ng snippet ang Lahat component at sinisimulan ang mga reaktibong variable gamit ang Vue Composition API.
Ang code ay nagsisimula sa pag-import ng Todo component at ang ref function mula sa tinukoy na landas at tingnan , ayon sa pagkakabanggit.
Ang snippet ay magsisimula ng isang reaktibong string, bagongTodo , upang iimbak ang gawain na iyong papasukin. Nagsisimula rin ito ng walang laman na reaktibo lahat array, hawak ang listahan ng mga gawain.
Ang addTodo Ang function ay nagdaragdag ng mga bagong gawain sa todos array. Kung walang laman ang newTodo, itutulak ito sa array sa pagkumpirma at nire-reset ang value ng newTodo upang payagan kang magdagdag ng higit pang mga gawain.
Ang addTodo function ay humihimok din ng saveToLocalStorage, na nagse-save ng todos array sa LocalStorage ng browser. Ginagamit ng snippet ang setItem paraan upang makamit ito at i-convert ang todos array sa isang JSON string bago imbakan.
Tinutukoy din nito ang a alisinTodo function na tumatagal ng a susi bilang parameter. Ginagamit nito ang key na ito upang alisin ang katumbas lahat mula sa todos array. Pagkatapos alisin, ang removeTodo function ay tumatawag sa saveToLocalStorage upang i-update ang LocalStorage data.
Sa wakas, ginagamit ng code ang getItem paraan na magagamit sa LocalStorage upang kunin ang mga dati nang na-save na gawain gamit ang todos key. Kung nag-save ka ng mga gawain sa LocalStorage ng browser, itinutulak ng code ang mga ito sa todos array.
Ngayon ay nahawakan mo na ang lohika ng bahagi ng App.vue, i-paste ang sumusunod na code sa template block ng iyong Vue app para gawin ang user interface:
<!-- App.vue -->
<template>
<div class="app">
<h1>To do List</h1>
<div class="add-todo">
<input v-model="newTodo" @keyup.enter="addTodo"
placeholder="Add a new task" class="todo-input" />
<button @click="addTodo" class="add-button">Add</button>
</div>
<Todo :todos="todos" @remove-todo="removeTodo" />
</div>
</template>
Ginagamit ng template v-modelo , isang paraan ng pagbubuklod ng data sa Vue upang itali ang inilagay na todo sa bagongTodo reaktibong string. Ginagamit din ng template ang v-on direktiba para sa paghawak ng mga kaganapan sa Vue sa pamamagitan ng shorthand nito ( @ ).
Gumagamit ito ng v-on upang makinig sa parehong i-click at pumasok mahahalagang kaganapan upang kumpirmahin ang bagongTodo.
Sa wakas, ginagamit ng template ang Lahat component na una mong ginawa para i-render ang listahan ng mga todos. Ang :lahat ipinapasa ng syntax ang lahat array bilang prop sa bahagi ng Todo.
Ang @alisin-lahat Ang syntax ay nagse-set up ng isang tagapakinig ng kaganapan upang makuha ang pasadyang kaganapan na inilabas ng bahagi ng Todo at tawagan ang alisinTodo function bilang tugon.
Ngayon nakumpleto mo na ang application, maaari mong piliing i-istilo ito ayon sa iyong panlasa. Maaari mong i-preview ang iyong application sa pamamagitan ng pagpapatakbo ng command na ito:
npm run dev
Dapat mong makita ang isang screen tulad nito:
Maaari kang magdagdag o mag-alis ng mga gawain sa loob ng Todo application. Higit pa rito, salamat sa pagsasama ng LocalStorage, maaari mong i-refresh ang application o ganap na lumabas dito; ang iyong na-curate na listahan ng gagawin ay mananatiling buo.
Kahalagahan ng LocalStorage
Ang pagsasama ng LocalStorage sa mga web application ay mahalaga sa mga baguhan at may karanasang developer. Ipinakilala ng LocalStorage ang mga nagsisimula sa pagtitiyaga ng data sa pamamagitan ng pagpayag sa kanila na mag-imbak at kumuha ng nilalamang binuo ng user.
Mahalaga ang LocalStorage dahil matitiyak mong mananatiling buo ang data ng iyong user sa iba't ibang session. Tinatanggal ng LocalStorage ang pangangailangan para sa patuloy na komunikasyon sa server, na humahantong sa mas mabilis na oras ng pag-load at pinahusay na pagtugon sa mga web application.