Membuat Aplikasi Catatan (Notes App) dengan LocalStorage

Dipublikasikan: Juli 2026

Aplikasi catatan adalah salah satu web app yang paling banyak dicari dan digunakan. Dalam tutorial ini Anda akan membuat notes app dengan fitur tambah, edit, hapus, dan cari catatan â€” semua data disimpan di browser menggunakan localStorage.

Fitur Lengkap

Tambah catatan dengan judul dan isi
Edit catatan yang sudah ada
Hapus catatan
Pencarian catatan real-time
Data tersimpan otomatis di browser

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Catatan</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Segoe UI',Arial,sans-serif;
      background:#f0f2f5; padding:30px;
    }
    .container { max-width:800px; margin:0 auto; }
    h1 { text-align:center; color:#2d3436; margin-bottom:30px; font-size:32px; }
    .toolbar { display:flex; gap:15px; margin-bottom:25px; flex-wrap:wrap; }
    input, textarea {
      padding:14px; border:2px solid #dfe6e9; border-radius:12px;
      font-size:15px; width:100%;
    }
    input:focus, textarea:focus { outline:none; border-color:#6c5ce7; }
    .note-form { background:#fff; padding:25px; border-radius:16px; box-shadow:0 2px 15px rgba(0,0,0,0.08); margin-bottom:25px; }
    .note-form h2 { margin-bottom:15px; color:#6c5ce7; font-size:20px; }
    .note-form input { margin-bottom:12px; }
    .note-form textarea { min-height:100px; resize:vertical; margin-bottom:12px; }
    .note-form button {
      padding:12px 28px; background:#6c5ce7; color:#fff;
      border:none; border-radius:10px; cursor:pointer; font-size:16px;
    }
    .note-form button:hover { background:#5b4bd6; }
    .search-box { margin-bottom:20px; }
    .notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
    .note-card {
      background:#fff; padding:20px; border-radius:14px;
      box-shadow:0 2px 10px rgba(0,0,0,0.06);
      border-left:5px solid #6c5ce7;
    }
    .note-card h3 { color:#2d3436; margin-bottom:8px; font-size:18px; }
    .note-card p { color:#636e72; line-height:1.6; font-size:14px; margin-bottom:15px; white-space:pre-wrap; }
    .note-card .date { font-size:12px; color:#b2bec3; margin-bottom:12px; }
    .note-card .actions { display:flex; gap:8px; }
    .note-card .actions button {
      padding:7px 16px; border:none; border-radius:8px; cursor:pointer; font-size:13px;
    }
    .btn-edit { background:#dfe6e9; color:#2d3436; }
    .btn-edit:hover { background:#d0d7dd; }
    .btn-delete { background:#ff7675; color:#fff; }
    .btn-delete:hover { background:#e86565; }
    .empty { text-align:center; color:#b2bec3; padding:40px; font-size:18px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>ðŸ“ Aplikasi Catatan</h1>
    <div class="note-form">
      <h2>Catatan Baru</h2>
      <input id="noteTitle" placeholder="Judul catatan..." />
      <textarea id="noteContent" placeholder="Isi catatan...</textarea>
      <button onclick="saveNote()">Simpan Catatan</button>
    </div>
    <div class="search-box">
      <input id="searchInput" placeholder="Cari catatan..." oninput="renderNotes()" />
    </div>
    <div class="notes-grid" id="notesGrid"></div>
  </div>
  <script>
    let notes = JSON.parse(localStorage.getItem('notes')) || [];
    let editIndex = -1;
    function saveNote() {
      const title = document.getElementById('noteTitle').value.trim();
      const content = document.getElementById('noteContent').value.trim();
      if (!title || !content) return alert('Judul dan isi catatan harus diisi');
      if (editIndex >= 0) {
        notes[editIndex] = { title, content, date: new Date().toLocaleDateString('id-ID') };
        editIndex = -1;
      } else {
        notes.unshift({ title, content, date: new Date().toLocaleDateString('id-ID') });
      }
      localStorage.setItem('notes', JSON.stringify(notes));
      document.getElementById('noteTitle').value = '';
      document.getElementById('noteContent').value = '';
      renderNotes();
    }
    function deleteNote(i) {
      if (confirm('Hapus catatan ini?')) { notes.splice(i,1); localStorage.setItem('notes',JSON.stringify(notes)); renderNotes(); }
    }
    function editNote(i) {
      editIndex = i;
      document.getElementById('noteTitle').value = notes[i].title;
      document.getElementById('noteContent').value = notes[i].content;
      window.scrollTo({top:0,behavior:'smooth'});
    }
    function renderNotes() {
      const q = document.getElementById('searchInput').value.toLowerCase();
      const filtered = notes.filter(n => n.title.toLowerCase().includes(q) || n.content.toLowerCase().includes(q));
      const grid = document.getElementById('notesGrid');
      if (filtered.length === 0) {
        grid.innerHTML = '<div class="empty">Tidak ada catatan. Buat catatan baru!</div>';
        return;
      }
      grid.innerHTML = filtered.map((n,i) => `
        <div class="note-card">
          <h3>${n.title}</h3>
          <div class="date">${n.date}</div>
          <p>${n.content}</p>
          <div class="actions">
            <button class="btn-edit" onclick="editNote(${notes.indexOf(n)})">Edit</button>
            <button class="btn-delete" onclick="deleteNote(${notes.indexOf(n)})">Hapus</button>
          </div>
        </div>
      `).join('');
    }
    renderNotes();
  </script>
</body>
</html>