Bu tanıdık örnek uygulamayı kullanarak web verilerini depolamanın modern yolu hakkında her şeyi öğrenin.

LocalStorage, web uygulamalarının anahtar/değer çiftlerini yerel cihazınızda depolamasına olanak tanıyan, tarayıcılarda yerleşik bir web API'sidir. Tarayıcınızı kapattıktan sonra bile verileri depolamak için basit bir yöntem sağlar.

Listeleri ve diğer küçük boyutlu verileri depolamak için LocalStorage'ı Vue uygulamalarınızla entegre edebilirsiniz. Bu, farklı uygulama oturumlarında kullanıcı verilerini korumanıza olanak tanır.

Bu eğitimden sonra, görevleri ekleyip kaldırabilen, verileri LocalStorage kullanarak depolayan işlevsel bir Vue yapılacaklar uygulamasına sahip olacaksınız.

Vue To-Do Uygulamasını Kurma

Kodlamaya başlamadan önce sahip olduğunuzdan emin olun. cihazınıza Node ve NPM yüklü.

Yeni bir proje oluşturmak için şu npm komutunu çalıştırın:

npm create vue

Komut, gerekli bağımlılıkları oluşturup kurmadan önce yeni Vue uygulamanız için bir ön ayar seçmenizi gerektirecektir.

Bu yapılacaklar uygulaması için ekstra özelliklere ihtiyacınız olmayacağından mevcut tüm ön ayarlar için "Hayır"ı seçin.

instagram viewer

Proje kurulumunun ardından LocalStorage ile yapılacaklar uygulamasını oluşturmaya başlayabilirsiniz.

Yapılacaklar Uygulamasını Oluşturma

Bu eğitim için iki Vue bileşeni oluşturacaksınız: Genel yapı için App.vue ve görevlerin listesini görüntülemek için Todo.vue.

Yapılacaklar Bileşenini Oluşturma

Yapılacaklar bileşeni için yeni bir dosya oluşturun, src/components/Todo.vue. Bu dosya görev listesinin yapısını işleyecektir.

Aşağıdaki kodu şuraya yapıştırın: Todo.vue dosya:


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

Yukarıdaki kod parçacığı, yapının yapısını detaylandırır. Yapmak bileşen. Bileşeni, sırasıyla sahne malzemeleri ve özel olayların kullanımı yoluyla verileri alacak ve olayları yayınlayacak şekilde ayarlar.

Daha fazla açıklamak gerekirse, kod şunu kullanır: Bileşenler arasında iletişim kurmak için Vue destekleri almak için yapılacaklar ana bileşeninden dizi, App.vue. Daha sonra şunu kullanır: Listeleri işlemek için v-for yönergesi alınan todos dizisini yinelemek için.

Kod ayrıca özel bir olay da yayar, yapılacakları kaldır, bir yük ile dizin. Bu, todos dizisindeki belirli bir dizine sahip belirli bir görevi kaldırmanıza olanak tanır.

Tıklandığında Kaldırmak düğmesini tıkladığınızda snippet, özel etkinliğin ana bileşene yayınlanmasını tetikler. Bu, ana bileşen App.vue'da tanımlanan ilgili işlevin yürütülmesini isteyen düğmeye tıkladığınızı gösterir.

Uygulamanın Görünüm Bileşenini Oluşturma

Başını aşmak App.vue Todo uygulamasını oluşturmaya devam etmek için. Uygulama bileşen yeni görevlerin eklenmesini ve Yapmak bileşen.

Aşağıdakini yapıştırın senaryo App.vue dosyanıza engelleyin:


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

Yukarıdaki kod parçacığı, işlemin mantığını özetlemektedir. App.vue bileşen. Snippet şunu içe aktarır: Yapmak bileşenini oluşturur ve reaktif değişkenleri Vue Composition API ile başlatır.

Kod, Todo bileşeninin içe aktarılmasıyla başlar ve referans belirtilen yoldan işlev görür ve görüntü, sırasıyla.

Parçacık daha sonra reaktif bir dizeyi başlatır, yeniYapılacakGireceğiniz görevi saklamak için. Aynı zamanda boş bir reaktif başlatır yapılacaklar görevlerin listesini tutan dizi.

addTodo işlev, yapılacaklar dizisine yeni görevler ekler. newTodo boş değilse, onaylandıktan sonra diziye aktarılır ve daha fazla görev ekleyebilmeniz için newTodo değerini sıfırlar.

addTodo işlevi ayrıca şunu çağırır: saveToLocalStorage, bu, todos dizisini tarayıcının LocalStorage'ına kaydeder. Snippet şunu kullanır: setItem bunu başarmak için bir yöntem kullanır ve todos dizisini depolamadan önce bir JSON dizesine dönüştürür.

Aynı zamanda bir tanımlar kaldırYapılacaklar bir alan işlevi anahtar parametre olarak. Karşılık gelenleri kaldırmak için bu anahtarı kullanır. yapmak todos dizisinden. Kaldırdıktan sonra, RemoveTodo işlevi, LocalStorage verilerini güncellemek için saveToLocalStorage öğesini çağırır.

Son olarak, kod şunu kullanır: getItem Yapılacaklar anahtarıyla önceden kaydedilmiş görevleri getirmek için LocalStorage'ın kullanabileceği yöntem. Görevleri tarayıcının LocalStorage'ına kaydettiyseniz, kod bunları todos dizisine aktarır.

Artık App.vue bileşeninin mantığını hallettiniz, aşağıdaki kodu yapıştırın. şablon Kullanıcı arayüzünü oluşturmak için Vue uygulamanızın bloğu:


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

Şablonun kullandığı V modeli, Vue'da verileri bağlama yöntemi girilen yapılacak işi bağlamak için yeniYapılacak reaktif dize. Şablon ayrıca şunları kullanır: v-açıkVue'daki olayları yönetme yönergesi kısaltması aracılığıyla (@).

Her ikisini de dinlemek için v-on'u kullanır. tıklamak Ve girmek yeniYapılacak'ı onaylamak için önemli olaylar.

Son olarak, şablon şunu kullanır: Yapmak Yapılacaklar listesini oluşturmak için ilk olarak oluşturduğunuz bileşen. : yapılacaklar sözdizimi geçer yapılacaklar diziyi Todo bileşenine destek olarak kullanın.

@remove-todo sözdizimi, Todo bileşeninin yayınladığı özel olayı yakalamak ve onu çağırmak için bir olay dinleyicisi kurar. kaldırYapılacaklar yanıt olarak işlev görür.

Artık uygulamayı tamamladınız, zevkinize göre şekillendirmeyi seçebilirsiniz. Bu komutu çalıştırarak uygulamanızın önizlemesini görebilirsiniz:

npm run dev

Bunun gibi bir ekran görmelisiniz:

Yapılacaklar uygulamasına görev ekleyebilir veya kaldırabilirsiniz. Dahası, LocalStorage entegrasyonu sayesinde uygulamayı yenileyebilir veya tamamen çıkabilirsiniz; seçilmiş yapılacaklar listeniz bozulmadan kalacaktır.

LocalStorage'ın Önemi

Web uygulamalarında LocalStorage entegrasyonu hem acemi hem de deneyimli geliştiriciler için çok önemlidir. LocalStorage, yeni başlayanlara kullanıcı tarafından oluşturulan içeriği depolamalarına ve almalarına olanak tanıyarak veri kalıcılığını tanıtır.

LocalStorage önemlidir, çünkü kullanıcı verilerinizin farklı oturumlarda bozulmadan kalmasını sağlayabilirsiniz. LocalStorage, sürekli sunucu iletişimi ihtiyacını ortadan kaldırarak web uygulamalarında daha hızlı yükleme süreleri ve gelişmiş yanıt süresi sağlar.