İşleriniz için pratik bir not defteri mi arıyorsunuz? JavaScript Local Storage kullanarak kendine kaydeden bir not defteri oluşturun! Bu yöntemle günlüklerinizi pratik ve eğlenceli bir şekilde yönetebilirsiniz

Not defteri oluşturmak için çok sayıda seçenek var, ancak bunların birçoğu bilgisayarınızda veya mobil cihazınızda kurulu olan bir uygulamanın kullanımını içeriyor. Bu da mobil cihazınızı veya bilgisayarınızı kullanmadığınız zamanlarda tüm verilerinizi erişilemez hale getirdiği anlamına gelir.

Ancak JavaScript'in yerel depolama özelliği, tüm verilerinizi web tarayıcınızın belleğinde saklama seçeneği sunar. Bu, çok daha hızlı ve kullanışlı hale getirir, çünkü herhangi bir uygulama veya güncelleme gerektirmeden tarayıcınızda verilerinizi saklar.

Bu makale, HTML, CSS ve JavaScript kullanarak bir not defteri uygulaması geliştirme sürecini anlatmaktadır. Bu uygulama kullanıcıların notlarını bir günlükte saklamalarına olanak tanır. Kullanıcılar, birden fazla not ekleyebilir, güncelleme yapabilir ve istediklerinde silinebilir.

Not defteri uygulamanız herhangi bir sunucuya bağlı olmadığından, tüm veriler yerel olarak saklanır ve kullanıcının işlem yaparken internete bağlı olması gerekmez.

Local Storage Nedir?

Local Storage, web tarayıcılarında JavaScript uygulamaları tarafından kullanılabilen bir API'dir. Bu API sayesinde kullanıcının tarayıcısında, yani istemci tarafında, veri depolama işlemi gerçekleştirilebilir. Local Storage sayesinde, bir web uygulamasında kullanıcının girdiği bilgiler, uygulama içerisindeki diğer fonksiyonlar tarafından her zaman erişilebilir hale gelir. Bu da web uygulamasının daha kullanışlı ve pratik olmasını sağlar.

Local Storage, web uygulamalarında sıkça kullanılmaktadır. Bu API sayesinde, kullanıcının girdiği bilgiler, sayfaları yenilemeden veya bilgisayara dosya kaydetmeye gerek kalmadan kaydedilebilir ve daha sonra tekrar kullanılabilir. Bu da kullanıcılar için zaman kazandırır ve web uygulamasının daha sık kullanılmasını sağlar.

Local Storage, sadece JavaScript tarafından kullanılabilen bir API'dir. Bu nedenle, tarayıcının JavaScript özelliklerinin kullanılabilir durumda olması gerekir. Local Storage'ın kullanımı oldukça basit ve kolaydır. Yalnızca JavaScript kodu ile birkaç satırda verilerin depolanması, alınması ve silinmesi işlemleri yapılabilir.

Local Storage'ın en büyük avantajlarından biri, tarayıcının kapatılmasına rağmen verilerin korunmasıdır. Bu sayede, kullanıcılar bir sonraki girişlerinde kaldıkları yerden devam edebilirler. Local Storage'ın kullanımı, veri depolama ihtiyacı olan web uygulamaları için oldukça önemlidir ve birçok farklı senaryoda kullanılabilecek kadar esnek bir API'dir.

Kullanıcıdan Verileri Almak

Kullanıcıların girdiği metinleri almak için, HTML'de bir form oluşturup JavaScript ile formu işlemek gerekir. Formda, kullanıcının metin girebileceği bir alan oluşturulmalı ve girdi alanının yanında bir gönderi butonu eklenmelidir.

Formda, "action" ve "method" özellikleri belirtilerek, formun gönderildiği adres ve gönderme yöntemi ayarlanabilir. Ayrıca, "name" özelliği ile form alanlarına isim verilmelidir.

Bir input alanı oluşturmak için "input" etiketi kullanılır. "Type" özelliği "text" olarak ayarlandığında, kullanıcı metin girebilir. "Name" özelliği verilen isim; JavaScript'te bu alanın değerine erişmek için kullanılacaktır.

Gönderme butonu, "button" etiketi ile oluşturulabilir. "Type" özelliği "submit" olarak ayarlandığında, buton gönderme işlemini gerçekleştirir.

Örneğin, HTML'de form oluşturulurken;

<form action="gonder.php" method="POST">  <input type="text" name="not" placeholder="Notunuzu girin">
  <button type="submit">Gönder</button></form>

Bu formda, "not" isimli bir alan oluşturuluyor. Kullanıcı, input alanına notunu girip "Gönder" butonuna tıklayınca form "gonder.php" sayfasına gönderilir.

Form Oluşturma

Not defteri uygulamamız için kullanıcının metin girebileceği bir form oluşturmalıyız. Bu form HTML kodları ile hazırlanabilir. Form oluştururken input alanları da eklemeyi unutmamalıyız.

HTML'de form oluşturmak için <form> etiketi kullanılır. İçindeki <input> etiketleri ile de input alanları oluşturulabilir. Input alanlarına veri tipi belirterek, kullanıcının doğru bir şekilde veri girmesini sağlayabiliriz. Örneğin, sadece sayı girişine izin vermek istiyorsak type="number" şeklinde belirtebiliriz.

Form oluştururken ayrıca "submit" butonu da eklememiz gerekmektedir. Bu buton sayesinde kullanıcının girdiği veriyi local storage'a kaydedebiliriz. Bu butonu oluşturmak için de <button> etiketi kullanabiliriz.

Aşağıdaki örnek kodda, bir not defteri formu için basit bir HTML kodu verilmiştir:

<form id="not_defteri">  <label for="metin">Not:</label>  <input type="text" id="metin" name="metin">  <br>  <button type="submit">Kaydet</button></form>

Yukarıdaki kodda, input alanına veri tipi olarak "text" belirtilmiştir. Ayrıca "label" etiketi ile kullanıcıya input alanı için bir açıklama da eklenmiştir.

Input Alanı

Günlük tutmak, hayatımızdaki birçok konuda daha organize olmamıza yardımcı olabilir. Bu nedenle, kullanıcıların girdiği verileri depolayabilen JavaScript yerel depolama özelliği kullanılarak bir not defteri uygulaması geliştirilebilir. Ancak bu uygulamada öncelikle, kullanıcının girdiği metinleri alacak bir input alanının oluşturulması gerekiyor.

Bunun için HTML'de bir form oluşturulabilir. Bu form sayesinde kullanıcıların girmesi gereken verileri kolayca alabiliriz. Bunun yanı sıra, input alanlarının etiketleri belirtilebilir; böylece kullanıcılara ne girmeleri gerektiği konusunda açık bir şekilde bilgi verilebilir. Örneğin, bir tarih seçmek isteniyorsa input alanına "tarih" etiketi verilerek kullanıcının doğru bilgiyi girmesi sağlanabilir.

Bu şekilde form ve input alanları oluşturularak, kullanıcıların gireceği veriler kolayca alınabilir. Ancak bu verilerin depolanabilmesi için JavaScript tarafında bir kod yazılması gerekiyor. Bu koda ilerleyen başlıklarda değineceğiz.

Submit Butonu

Not defteri uygulamasında kullanıcının girdiği metnin local storage'a kaydedilmesi için sunulan formun gönderilebilmesi için bir submit butonu eklenmelidir. Bu butonun HTML kodu aşağıdaki gibi olabilir:

Formun tasarımı ve sunulan butonun görünümü CSS ile belirlenebilir. CSS kodları ayrı bir sayfada tanımlanarak, HTML dosyasına link verilebilir. Bu sayede, uygulamanın tasarımı daha kolay bir şekilde yönetilebilir. Aşağıdaki CSS örneği, submit butonu için bazı stiller tanımlar:

Yukarıda verilen submit butonu kodları, uygulamanın çalışması için gerekli alanları oluşturur. Bu alanlar, tasarım ve özelliklerine göre kişiselleştirilebilir.

Depolama İşlemi

Local storage, JavaScript uygulamalarında istemci tarafında veri depolamak için kullanılan bir API'dir. Bu API, verileri tarayıcının belleğinde tutar ve sayfa yenilenseler bile veriler kaybolmaz. Bu nedenle, kullanıcılar uygulamalarındaki verilerini kaybetmeden tekrar erişebilirler.

JavaScript'de local storage'ın kullanımı oldukça basittir. Kullanıcıdan alınan veriler local storage'a kaydedilebilir ve istenildiğinde geri alınabilir. Local storage'a kaydetmek için localStorage.setItem() yöntemi kullanılır. Bu yöntem, anahtar-değer çifti olarak veriyi kaydeder. Örneğin:

Kaydedilen verilere erişmek için ise localStorage.getItem() yöntemi kullanılır. Bu yöntem, kaydedilen anahtara göre değeri geri döndürür. Örneğin:

• localStorage.getItem(“not_1"); // “Bugün hava çok güzeldi.” döndürür.
• localStorage.getItem(“not_2"); // “Yarınki toplantıyı not aldım, hazırım.” döndürür.

Kaydedilen verilerin silinmesi için localStorage.removeItem() kullanılır. Bu yöntem, veriyi kaydedildiği anahtara göre siler. Örneğin:

• localStorage.removeItem(“not_1"); // “not_1” adlı veri silinir.
• localStorage.removeItem(“not_2"); // “not_2” adlı veri silinir.

Local storage kullanarak veri depolama işlemi, JavaScript uygulamalarında sıklıkla kullanılır ve oldukça pratiktir. Veriler kaydedilirken, anahtar-değer çifti olarak kaydedilmesi önemlidir. Bu sayede verilere daha kolay bir şekilde erişim sağlanabilir ve silme işlemi yapılabilir.

Local Storage'a Kayıt Etmek

etiketi aracılığıyla alınan veriler, local storage'a kaydedilmek için JavaScript fonksiyonları yardımıyla manipüle edilebilir. Bu işlem için, öncelikle input alanının değerinin alınması gerekmektedir. Aşağıdaki örnekte, formdaki input alanından alınan veri "note" adı altında local storage'a kaydedilir:

```var note = document.getElementById("note-input").value;localStorage.setItem("note", note);```

Burada "note" adı, kaydedilen verinin local storage'da erişmek için kullanılacak olan anahtardır. "note-input" ise, formdaki input alanının bir örneğidir ve "getElementById" fonksiyonuyla alınır. Bu kod, kullanıcının girdiği notu local storage'a kaydederek, daha sonra kullanıcının bu notu görüntüleyebilmesini sağlayacaktır.

Ayrıca, aynı kod parçasının bir dizi olarak kullanılarak, kaydedilen birden fazla notun local storage'a kaydedilmesi de mümkündür. Bunun için, notların her biri ayrı bir anahtarla kaydedilir. Örneğin:

```var notes = ["Not 1", "Not 2", "Not 3"];for (var i = 0; i < notes.length; i++) { localStorage.setItem("note_" + i, notes[i]);}```

Notlar "notes" adlı bir dizi içinde yer almaktadır. For döngüsü, dizideki her bir notu döngüye sokarak, local storage'a ayrı bir anahtarla kaydetmektedir.

Böylece, kullanıcının girdiği notlar kaydedilerek yerel depolamada (local storage) saklanabilir. Bu sayede, kullanıcı bu notları daha sonra görüntüleyebilir ve kaydedilen notlar herhangi bir kayıp olmadan korunur.

Kayıtları Listelemek

Kaydedilen verilerin listelenmesi, not defteri uygulamamızın en önemli özelliklerinden biridir. Bunun için öncelikle, local storage'da kaydedilmiş verileri alabilmemiz gerekmektedir. Bu işlem için, local storage'dan verileri alma fonksiyonunu kullanabiliriz.

Bu fonksiyon sayesinde, kaydedilmiş tüm verileri bir dizi içerisinde tutabilir ve bu verileri daha sonra HTML sayfamızda listeleyebiliriz. Liste içerisindeki her veri için ayrı bir