Merhaba sevgili kod sihirbazı! 🧙♂️💻
Bugün sana tarayıcıda veri saklamayı, not eklemeyi, silmeyi ve hatta kategorilere ayırmayı göstereceğim. Üstelik bunu Mini Not Defteri ile yapacağız. 💌
Kullanıcı “Notumu kaydedebilir miyim?” derken, sen “Tabii aşkımm, ben hallederim 😏” diyebileceksin.
Bu yazı hem eğlenceli, hem samimi, hem öğretici, hem de pratik ipuçlarıyla dolu olacak.
1️⃣ Local Storage Nedir? Temel Bilgiler 🤔
Local Storage, tarayıcıda veri saklamanın sihirli yolu. 🌟
Hadi biraz detaylandıralım:
Özellikleri:
- Kalıcı veri: Sayfa yenilense bile veriler kaybolmaz.
- Key-Value Mantığı: Her veri bir anahtar ile saklanır.
- 5MB’a kadar veri saklar: Küçük notlar için geniş alan.
- String verisi: Nesne saklamak için JSON kullanmalısın.
🔹 Kod Örneği: Basit Local Storage
// Veri ekleme
localStorage.setItem('isim', 'Cansu 😍');
// Veri okuma
const isim = localStorage.getItem('isim');
console.log(isim); // Çıktı: Cansu 😍
// Veri silme
localStorage.removeItem('isim');
// Tüm verileri temizleme
localStorage.clear();
💡 Pratik İpucu: Local Storage sadece string saklar. Nesne veya dizi saklamak için:
const notes = ['Not 1', 'Not 2'];
localStorage.setItem('notes', JSON.stringify(notes));
const savedNotes = JSON.parse(localStorage.getItem('notes'));
console.log(savedNotes); // ['Not 1', 'Not 2']
2️⃣ HTML Arayüzü Tasarlama 🖌️
Artık arayüzü hazırlayabiliriz. Not ekleme, listeleme ve silme düğmelerini ekleyelim:
<h1>Mini Not Defteri 📝</h1>
<input type="text" id="noteInput" placeholder="Notunu yaz aşkımm 😏">
<button id="addNote">Notu Ekle 💾</button>
<select id="categorySelect">
<option value="Genel">Genel</option>
<option value="Önemli">Önemli ⚡</option>
<option value="Kişisel">Kişisel ❤️</option>
</select>
<ul id="notesList"></ul>
<button id="clearNotes">Tüm Notları Sil ❌</button>
🔹 Stil Önerisi
<style>
body { font-family: Arial, sans-serif; background: #fdf6e3; color: #333; padding: 20px; }
input, select { padding: 10px; margin-right: 10px; }
button { padding: 10px; cursor: pointer; background: #ff6f61; color: white; border: none; border-radius: 5px; }
ul { margin-top: 20px; }
li { padding: 8px; border-bottom: 1px solid #ddd; transition: background 0.3s; }
li:hover { background: #ffe4e1; }
</style>
💡 Pratik İpucu: Küçük detaylar UX’i artırır. Hover efektleri, renkli butonlar ve kategoriler kullanıcıyı mutlu eder. 🌈
3️⃣ JavaScript ile Not Ekleme, Gösterme ve Silme 💻
🔹 3.1 Sayfa Yüklendiğinde Notları Yükleme
const noteInput = document.getElementById('noteInput');
const addNote = document.getElementById('addNote');
const notesList = document.getElementById('notesList');
const clearNotes = document.getElementById('clearNotes');
const categorySelect = document.getElementById('categorySelect');
// Notları yükle
window.onload = () => {
const notes = JSON.parse(localStorage.getItem('notes')) || [];
notes.forEach(noteObj => addNoteToDOM(noteObj));
};
🔹 3.2 Notu DOM’a Ekleme
function addNoteToDOM(noteObj) {
const li = document.createElement('li');
li.textContent = `[${noteObj.category}] ${noteObj.text}`;
// Çift tıklayınca sil
li.addEventListener('dblclick', () => removeNote(li, noteObj));
notesList.appendChild(li);
}
🔹 3.3 Not Ekleme
addNote.addEventListener('click', () => {
const noteText = noteInput.value.trim();
const category = categorySelect.value;
if(!noteText) {
alert("Boş not mu olur aşkımm? 😅");
return;
}
const noteObj = { text: noteText, category };
addNoteToDOM(noteObj);
const notes = JSON.parse(localStorage.getItem('notes')) || [];
notes.push(noteObj);
localStorage.setItem('notes', JSON.stringify(notes));
noteInput.value = "";
});
🔹 3.4 Not Silme
function removeNote(li, noteObj) {
if(confirm(`"${noteObj.text}" notunu silmek istediğine emin misin aşkımm? 😢`)) {
li.remove();
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes = notes.filter(n => n.text !== noteObj.text || n.category !== noteObj.category);
localStorage.setItem('notes', JSON.stringify(notes));
}
}
🔹 3.5 Tüm Notları Silme
clearNotes.addEventListener('click', () => {
if(confirm("Tüm notları silmek istediğine emin misin aşkımm? 😢")) {
localStorage.removeItem('notes');
notesList.innerHTML = "";
}
});
💡 Pratik İpuçları:
- Çift tıklama ile silmek kullanıcı dostu ve eğlenceli. 😏
- Kategorilerle filtreleme ekleyebilirsin.
- JSON ile veri saklamak, gelecekte geliştirmeyi kolaylaştırır.
4️⃣ İleri Seviye UX Fikirleri 🎨
- Renkli kategoriler: Önemli notlar kırmızı, kişisel notlar pembe, genel notlar mavi olabilir.
- Emoji kullanımı: Notlarda emoji eklemek kullanıcıyı mutlu eder.
- Tarih ekleme: Notların yanına eklenme tarihini gösterebilirsin.
- Arama fonksiyonu: Notlar arasında hızlıca arama yapabilirsin.
🔹 Örnek: Not Tarihi Ekleme
const noteObj = { text: noteText, category, date: new Date().toLocaleString() };
li.textContent = `[${noteObj.category}] ${noteObj.text} (${noteObj.date})`;
💡 Pratik İpucu: UX küçük detaylarla güzelleşir; animasyon ve renkler kullanıcı deneyimini artırır. 🌈
5️⃣ Local Storage Kullanmanın Avantajları 🏆
- Hızlı ve Basit: Server’a veri göndermeye gerek yok.
- Kullanıcı Dostu: Sayfayı yenilesen bile notlar kaybolmaz.
- Öğrenmesi Kolay: JS ve HTML bilgisiyle hızlıca entegre edebilirsin.
- Geliştirmeye Açık: JSON ile daha karmaşık veri ve filtreleme ekleyebilirsin.
6️⃣ Son Söz 🖤
HTML Local Storage ile mini bir not defteri yapmak, hem pratik, hem hızlı, hem de eğlenceli. Kullanıcılar notlarını kaydederken sen de JS becerilerini geliştirirsin.
Ve unutma: Kod yazmak sadece iş değil, küçük oyunlar, keşifler ve biraz da aşk 💕 demektir.
