Dengan menggunakan aplikasi contoh yang familiar ini, pelajari semua tentang cara modern untuk menyimpan data web.

LocalStorage adalah API web, yang terpasang di browser, yang memungkinkan aplikasi web menyimpan pasangan nilai kunci di perangkat lokal Anda. Ini memberikan metode sederhana untuk menyimpan data, bahkan setelah Anda menutup browser Anda.

Anda dapat mengintegrasikan LocalStorage dengan aplikasi Vue Anda untuk menyimpan daftar dan data berukuran kecil lainnya. Hal ini memungkinkan Anda menyimpan data pengguna di berbagai sesi aplikasi.

Setelah tutorial ini, Anda akan memiliki aplikasi tugas Vue yang fungsional yang dapat menambah dan menghapus tugas, menyimpan data menggunakan LocalStorage.

Menyiapkan Aplikasi Vue To-Do

Sebelum Anda mulai membuat kode, pastikan Anda sudah memilikinya menginstal Node dan NPM di perangkat Anda.

Untuk membuat proyek baru, jalankan perintah npm ini:

npm create vue

Perintah ini mengharuskan Anda memilih preset untuk aplikasi Vue baru Anda sebelum membuat dan menginstal dependensi yang diperlukan.

instagram viewer

Anda tidak memerlukan fitur tambahan untuk aplikasi agenda ini, jadi pilih "Tidak" untuk semua preset yang tersedia.

Setelah proyek disiapkan, Anda dapat mulai membuat aplikasi agenda dengan LocalStorage.

Membuat Aplikasi Agenda

Untuk tutorial ini, Anda akan membuat dua komponen Vue: App.vue untuk keseluruhan struktur dan Todo.vue untuk menampilkan daftar tugas.

Membuat Komponen Agenda

Untuk komponen Todo, buat file baru, src/components/Todo.vue. File ini akan menangani struktur daftar tugas.

Rekatkan kode berikut ke dalam Todo.vue mengajukan:


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

Cuplikan kode di atas merinci strukturnya Melakukan komponen. Ini menyiapkan komponen untuk menerima data dan memancarkan peristiwa masing-masing melalui penggunaan props dan peristiwa khusus.

Untuk menjelaskan lebih lanjut, kode tersebut digunakan Props Vue untuk komunikasi antar komponen untuk menerima semuanya array dari komponen induknya, Aplikasi.vue. Ia kemudian menggunakan direktif v-for untuk merender daftar untuk mengulangi array todos yang diterima.

Kode ini juga memunculkan peristiwa khusus, hapus-todo, dengan muatan indeks. Hal ini memungkinkan Anda untuk menghapus tugas tertentu dengan indeks tertentu dalam array todos.

Saat mengklik Menghapus tombol, cuplikan memicu emisi peristiwa khusus ke komponen induk. Ini menunjukkan bahwa Anda telah mengklik tombol tersebut, yang meminta eksekusi fungsi terkait yang ditentukan dalam komponen induk, App.vue.

Membuat Komponen Tampilan Aplikasi

Pergilah ke Aplikasi.vue untuk terus membangun aplikasi Todo. Itu Aplikasi komponen akan menangani penambahan tugas baru dan merender Melakukan komponen.

Rekatkan yang berikut ini naskah blok ke dalam file App.vue Anda:


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

Cuplikan kode di atas menguraikan logikanya Aplikasi.vue komponen. Cuplikan mengimpor Melakukan komponen dan menginisialisasi variabel reaktif dengan Vue Composition API.

Kode dimulai dengan impor komponen Todo dan referensi fungsi dari jalur yang ditentukan dan vue, masing-masing.

Cuplikan kemudian menginisialisasi string reaktif, Todo baru, untuk menyimpan tugas yang akan Anda masukkan. Ini juga menginisialisasi reaktif kosong semuanya array, memegang daftar tugas.

Itu tambahkanTodo fungsi menambahkan tugas baru ke array todos. Jika newTodo tidak kosong, maka akan dimasukkan ke dalam array pada konfirmasi dan menyetel ulang nilai newTodo agar Anda dapat menambahkan lebih banyak tugas.

Fungsi addTodo juga memanggil simpanToLocalStorage, yang menyimpan array todos ke Penyimpanan Lokal browser. Cuplikan menggunakan setItem metode untuk mencapai ini dan mengubah array todos menjadi string JSON sebelum disimpan.

Ini juga mendefinisikan a hapusTodo fungsi yang memerlukan a kunci sebagai parameter. Ia menggunakan kunci ini untuk menghapus yang sesuai melakukan dari susunan todos. Setelah penghapusan, fungsi deleteTodo memanggil saveToLocalStorage untuk memperbarui data LocalStorage.

Terakhir, kode tersebut menggunakan dapatkanItem metode yang tersedia untuk LocalStorage untuk mengambil tugas yang disimpan sebelumnya dengan kunci todos. Jika Anda telah menyimpan tugas di Penyimpanan Lokal browser, kode akan memasukkannya ke dalam array tugas.

Sekarang Anda telah menangani logika komponen App.vue, tempelkan kode berikut di templat blok aplikasi Vue Anda untuk membuat antarmuka pengguna:


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

Templatnya menggunakan v-model, metode pengikatan data di Vue untuk mengikat tugas yang dimasukkan ke Todo baru string reaktif. Templatnya juga menggunakan v-onarahan untuk menangani event di Vue melalui singkatannya (@).

Ia menggunakan v-on untuk mendengarkan keduanya klik Dan memasuki peristiwa penting untuk mengonfirmasi Todo baru.

Terakhir, template menggunakan Melakukan komponen yang Anda buat terlebih dahulu untuk merender daftar tugas. Itu : semua sintaks melewati semuanya array sebagai penyangga komponen Todo.

Itu @ hapus-todo sintaks menyiapkan pendengar acara untuk menangkap acara khusus yang dipancarkan komponen Todo dan memanggil hapusTodo berfungsi sebagai respons.

Sekarang Anda telah menyelesaikan aplikasinya, Anda dapat memilih gaya sesuai selera Anda. Anda dapat melihat pratinjau aplikasi Anda dengan menjalankan perintah ini:

npm run dev

Anda akan melihat layar seperti ini:

Anda dapat menambah atau menghapus tugas dalam aplikasi Todo. Terlebih lagi, berkat integrasi LocalStorage, Anda dapat menyegarkan aplikasi atau keluar sepenuhnya; daftar tugas yang Anda pilih akan tetap utuh.

Pentingnya Penyimpanan Lokal

Integrasi LocalStorage dalam aplikasi web sangat penting bagi pengembang pemula dan berpengalaman. LocalStorage memperkenalkan persistensi data kepada pemula dengan memungkinkan mereka menyimpan dan mengambil konten buatan pengguna.

Penyimpanan Lokal penting karena Anda dapat memastikan data pengguna Anda tetap utuh di berbagai sesi. LocalStorage menghilangkan kebutuhan akan komunikasi server yang konstan, sehingga mempercepat waktu muat dan meningkatkan respons dalam aplikasi web.