Home-theater-designers
LocalStorage ialah API web, terbina dalam penyemak imbas, yang membolehkan aplikasi web menyimpan pasangan nilai kunci pada peranti tempatan anda. Ia menyediakan kaedah mudah untuk menyimpan data, walaupun selepas anda menutup penyemak imbas anda.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Anda boleh menyepadukan LocalStorage dengan apl Vue anda untuk menyimpan senarai dan data bersaiz kecil yang lain. Ini membolehkan anda mengekalkan data pengguna merentas sesi apl yang berbeza.
Selepas tutorial ini, anda akan mempunyai apl tugasan Vue berfungsi yang boleh menambah dan mengalih keluar tugasan, menyimpan data menggunakan LocalStorage.
Menyediakan Aplikasi Vue To-Do
Sebelum anda memulakan pengekodan, pastikan anda mempunyai memasang Node dan NPM pada peranti anda .
Untuk membuat projek baharu, jalankan arahan npm ini:
1F5A5E3C95B42A38533D4F6CB5CBBF4F023DFDE3
Perintah tersebut memerlukan anda memilih pratetap untuk aplikasi Vue baharu anda sebelum membuat dan memasang kebergantungan yang diperlukan.
Anda tidak memerlukan ciri tambahan untuk apl tugasan ini, jadi pilih 'Tidak' untuk semua pratetap yang tersedia.
Dengan penyediaan projek, anda boleh mula membina aplikasi tugasan dengan LocalStorage.
Mencipta Aplikasi Tugasan
Untuk tutorial ini, anda akan mencipta dua komponen Vue: App.vue untuk struktur keseluruhan dan Todo.vue untuk memaparkan senarai tugasan.
Mencipta Komponen Tugasan
Untuk komponen Todo, buat fail baharu, src/components/Todo.vue . Fail ini akan mengendalikan struktur senarai tugasan.
Tampalkan kod berikut ke dalam Todo.vue fail:
<!-- 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>
Coretan kod di atas memperincikan struktur Semua komponen. Ia menyediakan komponen untuk menerima data dan memancarkan peristiwa melalui penggunaan prop dan acara tersuai, masing-masing.
memindahkan data ps4 ke ps4 lain
Untuk menerangkan lebih lanjut, kod tersebut menggunakan Vue props untuk berkomunikasi antara komponen untuk menerima semua tatasusunan daripada komponen induknya, app.vue . Ia kemudian menggunakan v-untuk arahan untuk memaparkan senarai untuk lelaran melalui tatasusunan todos yang diterima.
Kod itu juga memancarkan acara tersuai, keluarkan semua , dengan muatan indeks . Ini membolehkan anda mengalih keluar tugas tertentu dengan indeks tertentu dalam tatasusunan todos.
Apabila mengklik pada Alih keluar butang, coretan mencetuskan pelepasan acara tersuai kepada komponen induk. Ini menunjukkan bahawa anda telah mengklik butang, mendorong pelaksanaan fungsi sepadan yang ditakrifkan dalam komponen induk, App.vue.
Mencipta Komponen Paparan Aplikasi
Pergi ke app.vue untuk terus membina aplikasi Todo. The Aplikasi komponen akan mengendalikan menambah tugasan baharu dan memberikan Semua komponen.
Tampal yang berikut skrip sekat ke dalam fail App.vue anda:
2CFA7B6953650ECDA51C14831899236F5137AD8Coretan kod di atas menggariskan logik app.vue komponen. Coretan mengimport Semua komponen dan memulakan pembolehubah reaktif dengan API Komposisi Vue.
Kod bermula dengan import komponen Todo dan ruj berfungsi daripada laluan yang ditentukan dan pandangan , masing-masing.
Coretan itu kemudiannya memulakan rentetan reaktif, newTodo , untuk menyimpan tugasan yang akan anda masukkan. Ia juga memulakan reaktif kosong semua tatasusunan, memegang senarai tugasan.
The addTodo fungsi menambah tugas baharu pada tatasusunan todos. Jika newTodo tidak kosong, ia ditolak ke dalam tatasusunan semasa pengesahan dan menetapkan semula nilai newTodo untuk membolehkan anda menambah lebih banyak tugas.
Fungsi addTodo juga menggunakan saveToLocalStorage, yang menyimpan tatasusunan todos ke dalam LocalStorage penyemak imbas. Coretan menggunakan setItem kaedah untuk mencapai ini dan menukar tatasusunan todos kepada rentetan JSON sebelum penyimpanan.
Ia juga mentakrifkan a removeTodo fungsi yang mengambil a kunci sebagai parameter. Ia menggunakan kunci ini untuk mengalih keluar yang sepadan semua daripada tatasusunan todos. Selepas dialih keluar, fungsi removeTodo memanggil saveToLocalStorage untuk mengemas kini data LocalStorage.
Akhirnya, kod tersebut menggunakan getItem kaedah tersedia untuk LocalStorage untuk mengambil tugasan yang disimpan sebelum ini dengan kekunci todos. Jika anda telah menyimpan tugasan dalam LocalStorage penyemak imbas, kod tersebut menolaknya ke dalam tatasusunan todos.
Sekarang anda telah mengendalikan logik komponen App.vue, tampal kod berikut dalam fail templat blok apl Vue anda untuk mencipta antara muka pengguna:
<!-- 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>
Templat menggunakan v-model , kaedah mengikat data dalam Vue untuk mengikat todo yang dimasukkan ke newTodo rentetan reaktif. Templat juga menggunakan v-on arahan untuk mengendalikan acara dalam Vue melalui singkatannya ( @ ).
Ia menggunakan v-on untuk mendengar kedua-dua klik dan masuk peristiwa penting untuk mengesahkan newTodo.
Akhirnya, templat menggunakan Semua komponen yang anda buat dahulu untuk memaparkan senarai tugasan. The :semua sintaks melepasi semua tatasusunan sebagai prop kepada komponen Todo.
The @buang-semuanya sintaks menyediakan pendengar acara untuk menangkap acara tersuai komponen Todo yang dipancarkan dan memanggil removeTodo berfungsi sebagai tindak balas.
Sekarang anda telah melengkapkan permohonan itu, anda boleh memilih untuk menggayakannya mengikut citarasa anda. Anda boleh pratonton aplikasi anda dengan menjalankan arahan ini:
npm run dev
Anda sepatutnya melihat skrin seperti ini:
Anda boleh menambah atau mengalih keluar tugas dalam aplikasi Todo. Lebih-lebih lagi, terima kasih kepada penyepaduan LocalStorage, anda boleh memuat semula aplikasi atau keluar sepenuhnya; senarai tugasan anda yang dipilih susun akan kekal utuh.
Kepentingan LocalStorage
Penyepaduan LocalStorage dalam aplikasi web adalah penting untuk pembangun pemula dan berpengalaman. LocalStorage memperkenalkan pemula kepada ketekunan data dengan membenarkan mereka menyimpan dan mendapatkan semula kandungan yang dijana pengguna.
LocalStorage adalah penting kerana anda boleh memastikan data pengguna anda kekal utuh merentas sesi yang berbeza. LocalStorage menghapuskan keperluan untuk komunikasi pelayan yang berterusan, yang membawa kepada masa pemuatan yang lebih cepat dan responsif yang lebih baik dalam aplikasi web.